{% extends 'c-word.html' %} {% block title %}Web - CSS | Style {% endblock title %} {% block point1 %}

Category：computer | web | CSS

CSS

web 前端三层结构
结构层 HTML  从语义的角度描述页面结构。
样式层 CSS    从审美的角度负责页面样式。
行为层  JavaScript  从交互的角度描述页面行为。

Overview

Definition

层叠样式表 (Cascading Style Sheets，缩写为 CSS）， 是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 外部样式表通常存储在 CSS 文件中，可以极大提高工作效率
  • 多个样式定义可层叠为一
  • 是一门指定文档该如何呈现给用户的语言。

CSS 是开放网络的核心语言之一，由 W3C 规范 进行标准化。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。

将一篇文档 呈现 给用户是指将文档转换成你的听众能够使用的一种形式。火狐、Chrome或IE等浏览器，用于将文档以可视的形式进行呈现，如在计算机屏幕、投影仪或打印机上。

为什么使用 CSS

  • 解决了 HTML 内容与表现分离的问题，以便能够：
    • 避免重复
    • 更容易维护
    • 为不同的目的，使用不同的样式而内容相同

      CSS 如何工作

      浏览器在展现一个文档的时候，必须要把文档内容和相应的样式信息结合起来展示。 这个处理过程一般分两个阶段：

      1. 浏览器先将标记语言和CSS转换成DOM (文档对象模型)结构。这时DOM 就代表了电脑内存中的相应文档，因为它已经融合了文档内容和相应的样式表。
      2. 最后浏览器把DOM的内容展示出来。

      DOM是一种树形结构。 每个元素和非空文本都可以看做是树形结构上的一个结点。DOM结点不再是容器，但是，它可以作为子结点的父类结点而存在。

      层叠与继承

      一个元素的样式，可以通过多种方式来定义，而多种定义方式之间通过复杂的影响关系决定了元素的最终样式。这种复杂既造就了CSS的强大，也导致CSS显得如此“混乱”而且难以调试。

      对于层叠来说，共有三种主要的样式来源：

      • 浏览器对HTML定义的默认样式。
      • 用户定义的样式。
      • 开发者定义的样式，可以有三种形式：
        • 定义在外部文件（外链样式）：本教程中案例主要是通过这种形式定义样式。
        • 在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。
        • 定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。

      用户定义的样式表会覆盖浏览器定义的默认样式，然后网页开发者定义的样式又会覆盖用户样式。在这个教程中，你作为网页的开发者只需要关注开发者样式。

      再来看看优先级，从高到低依次为：网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式。

      对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式。

      CSS 另外提供了一个!important关键字，用户可以通过使用这个关键字使自己定义的样式覆盖掉开发者定义的样式。
      这就意味着，作为开发者，你很难准确的预知页面最终在用户电脑上的显示效果。

      选择器

      类选择器（Class selectors）

      通过设置元素的 class 属性，可以为元素指定类名。类名由开发者自己指定。 文档中的多个元素可以拥有同一个类名。

      在写样式表时，类选择器是以英文句号（.）开头的。

      ID选择器（ID selectors）

      通过设置元素的 id 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。

      在写样式表时，ID选择器是以#开头的。

      伪类选择器（Pseudo-classes selectors）

      CSS伪类（pseudo-class）是加在选择器后面的用来指定元素状态的关键字。比如，:hover 会在鼠标悬停在选中元素上时应用相应的样式。

      伪类和伪元素（pseudo-elements）不仅可以让你为符合某种文档树结构的元素指定样式，还可以为符合某些外部条件的元素指定样式：浏览历史(比如是否访问过 (:visited)， 内容状态(如 :checked ), 鼠标位置 (如:hover). 完整列表参见 CSS3 Selectors working spec.

      伪类列表

      基于关系的选择器

      CSS还有多种基于元素关系的选择器。通过它们你可以更精确的选择元素。

      常见的基于关系的选择器
      选择器选择的元素
      A E元素A的任一后代元素E (后代节点指A的子节点，子节点的子节点，以此类推)
      A > E元素A的任一子元素E(也就是直系后代)
      E:first-child任一是其父母结点的第一个子节点的元素E
      B + E元素B的任一下一个兄弟元素E
      B ~ EB元素后面的拥有共同父元素的兄弟元素E

      你可以任意组合以表达更复杂的关系。

      你还可以使用星号（*）来表示”任意元素“。

      选取器组

      当很多元素具有相同的样式时，你就需要定义一个选择器组，组内用逗号分隔。这样声明的样式就会应用到组内所有的选择器上。

      在样式表的其他地方，你也可以单独对这些选择器重新设置样式，这些样式会应用到相应的选择器上。

      可读性良好的 CSS

      你可以通过添加空白字符和注释来提高样式表的可读性。你也可以把不同的选择器放到一组中来，这样同一样式可以应用到这一组中。

      空白字符

      空白字符是指空格、tab字符和换行。你可以通过添加这些空白字符来提高样式表的可读性。

      对页面而言，空白字符也是页面的一个组成部分，它的效果就是创造了边距、分割，还有行和列间的空白。

      如果你的样式表中一行只有一条规则，那这是使用空白字符最少的情况。但是，对于复杂的样式表而言，这可能不便于阅读，而且维护起来也比较困难。

      样式表的书写风格可以根据你自己的喜好来选择。但是，如果你开发的项目需要分享给他人，那就很有必要来制定一些书写规范。

      注释

      CSS注释以/* 开始，以 */结束。

      你可以在样式表中写些实际意义的注释，也可以是为了测试的目的而写的临时性的注释内容。

      对于样式表中的注释内容一定要写在注释标签内，这样浏览器在解析的时候会忽略注释。一定要注意注释的起始标签。样式表的其他部分始终要符合语法规则。

      文本样式

      颜色

      内容

      文本内容

      CSS可以在元素的前后插入文本：在选择器的后面加上::before 或者 ::after 。在声明中，指定 content 属性，并设置文本内容。

      图片内容

      可以通过将 content 属性值设置为某个图片的URL，可以将图片插到元素的前面或后面。

      将图片设置成元素的背景图：将 background 的值设为图片的URL。这是同时设置背景颜色，背景图，图片如何重复等的快捷写法。

      列表

      如果你完成了上一节的挑战任务，你就知道如何在列表项前面插入内容。

      CSS为列表提供了专门的属性。如果可以，使用这些属性通常会比较方便。

      使用list-style 属性来指定列表项标记的样式。

      你的CSS中的选择器可以选中列表项 (比如, <li>)。也可以选中列表项的父节点 (比如, <ul>)。此时列表项会继承父节点的样式。

      无序列表

      无序列表的每个列表项都用同样的方式标记。

      CSS 有三种标记样式：

      • disc
      • circle
      • square

      你可以指定一个图片的URL来自定义标记样式。

      有序列表

      在有序列表中，每个列表项都被标记了不同的序号。

      用list-style 属性指定标记样式：

      • decimal
      • lower-roman
      • upper-roman
      • lower-latin
      • upper-latin

      计数器

      注意:  一些浏览器不支持计数器。Quirks Mode site 的CSS contents and browser compatibility 页有更多这方面的兼容表格可以参考。 CSS Reference 也有浏览器兼容性表格。

      你可以用计数器来计数任何元素，不仅是列表元素。比如，在某些文档中你可能想计数标题和段落。

      要想计数，你必须定义一个计数器。

      在计数开始前的某个元素上，设置 counter-reset属性以重置计数器。被计数元素的父节点是一个不错的选择。当然，任何出现在被计数元素前面的元素都可以。

      设置每个需要计数的元素的counter-increment 属性为你的计数器名。

      通过为选择器增加 :before 或 :after 并设置 content 属性来显示计数器。 (如上一节所示, 内容).

      在content属性的值中设置 counter()，在括号内填上计数器的名字。可选的是设置计数器类型。其类型和前面一节 有序列表 中相同。

      正常情况下，显示计数器的元素也会递增计数器。

      盒模型

      当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成。

      中间是元素呈现内容的区域。这个区域的外面是内边距。再外面是边框。最外面的是外边距，外边距将该元素与其它元素分开。

      内边距，边框和外边距在元素的上、右、下、左都可以有不同的大小。所有这些大小值都可以为0。

      颜色

      内边距总是跟元素的背景色一样，所以当你设置背景色时，你会发现背景色在元素本身和内边距上都生效了。外边距总是透明的。

      边框

      你可以用边线或者边框来装饰元素。

      用 border 属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位）， 样式， 还有颜色。

      你也可以通过设置样式为 none 或 hidden 来明确地移除边框，或者设置边框颜色为 transparent 来让边框不可见，后者不会改变布局。

      如果一次只指定某一个方向的边框，就用属性： border-top， border-right， border-bottom， border-left。 你可以用这些属性指定某个方向上的边框，或者不同方向上的不同边框。

      外边距和内边距

      使用外边距和内边距调整元素的位置，并在其周围创建空间。

      用 margin 属性或者 padding 属性分别设置外边距和内边距的宽度。

      如果你指定一个宽度，它将会作用于元素四周（上、右、下、左）。

      如果你指定两个宽度， 第一个宽度会作用于顶部和底部，第二个宽度作用于右边和左边。

      你也可以按照顺序指定四个宽度： 上、右、下、左。

      布局

      你可以通过 CSS 来设置布局的炫酷效果。其中所涉及的部分高阶技术并不是本文范畴。

      当你设计一个简单布局时, 你的样式表与浏览器默认样式表之间的交互、以及与布局引擎的交互都是相当复杂的。 这也是一个高阶话题，并不在本文范畴。

      本文主要介绍一些简单的布局方法。（高阶技术请参阅外部链接 学习高级布局）

      文档结构

      当你想控制文档布局时，就不得不改变它的结构。

      页面标记语言通常都会有公共标签来创建结构。例如, 在 HTML 中你可以使用 <div> 元素来创建结构。

      大小单位

      到目前为止，你可以通过像素来指定大小。这在有些情况下是非常合适的，比如电脑屏幕显示。 但当用户改变字体大小之后，你的布局可能会发生错位。

      因此，最好通过百分比或 ems (em) 来指定大小。 em 通常是指当前字体大小(字母m的宽度)。当用户改变字体大小时，你的布局会自己修正。

      文本布局

      有两个属性可以指定元素内容的对齐方式。你可以用它们来进行简单的布局:

      text-align
      内容对齐。 可以使用下面几个值： left, right, center, justify。
      text-indent
      指定内容缩进。

      这两个属性可以应用于任何文本类内容，不只是纯文本。 需要注意的是，它们会被元素的子元素继承， 所以需要在子元素中将它们关闭，以免出现意想不到的效果。

      浮动

      float 属性强制元素靠左或靠右。 这是控制元素位置和大小的简单方法。

      你可以使用 clear 属性来避免其它元素受到浮动效果的影响。

      位置

      你可以为一个元素指定  position 属性为以下值之一，来设置其位置。

      这些是高阶属性。 可以通过简单的方式来使用它们—这也是在基础教程里提到它们的原因。但使用它们来实现复杂的布局会相对困难一些。

      relative
      通过为元素指定一个值，元素相对于其原来位置移动。也可以使用margin来达到同样的效果。
      fixed
      为元素指定相对于窗口的确切位置 。即使文档的其它元素出现滚动，元素位置仍然不变。
      absolute
      为元素指定相对于其父元素的确切位置。只有在父元素使用 relative, fixed or absolute 时才有效。你可以为任何父元素指定 position: relative;因为它不会产生移动。
      static
      默认值。当明确要关闭位置属性时使用。

      和 position 属性(除了 static)一起使用的, 有下列属性: top, right, bottom, left, width, height 通过设置它们来指定元素的位置或大小。


      表格

      表格是一个矩形网格中的信息安排。一些表格相当复杂，不同的浏览器对复杂的表格将会有不同的展示结果。

      当你设计你的文档时，使用一个表格来表示一系列信息的关系。因为信息的意义依然清晰，所以不同浏览器用稍微不同的方式来展示表格是没有关系的。

      创建表格的时候，不要用一些非常规的方式构造特殊的可视化布局，本教程的前一页（布局）使用的技术可以更好的达成目的。

      表格结构

      在表格中，信息显示在一个个的单元格（cell）中.

      在页面横向上一条直线的单元格构成了行（row）。

      在一些表格中，行可能被分组。表格开始的特定的行组是表头 （header）。表格最后的特定行组是表尾（footer）。表格中主要的行就是表体（body），这些表体也可能被分组。

      在页面纵向上一条直线的单元格构成了列（column），但是在CSS表格中，列的使用是受限的。

      边框

      单元格没有外边距。

      但是单元格有边框和内边距。默认情况下，边框被表格的border-spacing属性值间隔。你也可以通过设置表格的border-collapse属性值为collapse来完全移除间隔。

      标题

      <caption>元素是用在整个表格的一个标签。默认下，它显示在表格的顶部。

      可以设置<caption>的caption-side属性值为bottom来将标签移到表格的底部。

      想要样式化caption的文本，可以使用任何常规的文本属性。

      空单元格

      你可以通过为表格元素指定empty-cells属性值show来显示空单元格（就是其边框和背景）。

      你也可以指定empty-cells: hide;来隐藏边框和背景，那么如果一个单元格的父元素设置了背景，背景将通过空单元格显示出来。

      媒体

      CSS的作用是将网页文档以更友好的展现方式呈现给用户。

      例如，假设你现在正用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来，而显示设备、屏幕投影和打印等这些媒介都有自己的特点，CSS就是为文档提供在不同媒介上展示的适配方法。

      CSS通过使用@media 的格式来对特定的媒介指定适配规则。

      一些常见的媒介类型:

      screen彩色计算机显示
      print打印（分页式媒体）
      projection投影
      all所有媒体 (默认)
      更多

      一些其他指定媒介类型的规则。

      类型可以在样式表通过link方式加到文档时被指定，这是文档的标签语言允许的 。例如，在HTML中，你可以通过在 LINK 标签上添加media属性来指定媒介类型。

      在CSS中，你可以在样式表开头使用 @import 一个url来引入另外的样式表，同时指定其媒介类型。

      根据这些知识，你可以区分在不同的文件中定义不同媒介的样式规则。有时这也是结构化样式表的好方法。

      想获取媒介类型更多细节，请参考CSS规范中的 Media 部分。

      接下来将介绍更多 display 属性的例子: XML data.


      语法

      CSS有一套用于描述其语言的术语。在前面的教程中，你应该已经写过这个样式：

      strong {
  color: red;
}

      在CSS的术语中，上面这段代码被称为一条规则（rule）。这条规则以选择器strong开始，它选择要在DOM中哪些元素上使用这条规则。

      更多细节

      花括号中的部分称为声明（declaration）

      关键字color是一个属性, red 是其对应的值.

      同一个声明中的 属性和值组成一个名值对（property-value pairs），名值对用分号分隔.

      不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

      如何插入样式表

      样式表允许以多种方式规定样式信息。样式可以存储在单个 HTML 元素中，或在 HTML 页面的头元素中，或在一个外部的 CSS 文件中。同一个 HTML 文档内部可以引用多个外部样式表。

      当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：

      外部样式表（可复用与多个页面）

      当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：

      <head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

      浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

      • 外部样式表可以在任何文本编辑器中进行编辑。
      • 文件不能包含任何的 html 标签。
      • 外部样式表文件应该以 .css 扩展名进行保存。

      内部样式表（单个文档）

      当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

      <head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

      内联样式（单个文档中的单个元素）

      由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

      要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

      <p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

      CSS3

      简介

      如同人类的的进化一样，CSS3 是 CSS2 的“进化”版本，在 CSS2 基础上，增强或新增了许多特性，弥补了 CSS2 的众多不足之处，使得 Web 开发变得更为高效和便捷。

      CSS3 现状

      • 浏览器支持程度差，需要添加私有前缀 
      • 移动端支持优于 PC 端 
      • 不断改进中 
      • 应用相对广泛 

      如何对待？

      • 坚持渐进增强原则 
      • 考虑用户群体 
      • 遵照产品的方案 
      • 听 Boss 的

      C3 新增选择器

      • 属性选择器
      • 伪类选择器
      • 伪元素选择器

      颜色

      • RGBA
      • HSLA
      新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，不具有继承性，即不会影响子元素的透明度。

      Red、Green、Blue、Alpha 即 RGBA
      Hue、Saturation、Lightness、Alpha即HSLA

      R、G、B 取值范围0~255
      H 取值范围0~360，0/360表示黑色、120表示绿色、240表示蓝色
      S 取值范围0%~100%
      L 取值范围0%~100%
      A 取值范围0~1

      关于透明度：
      1、opacity 子元素会继承父元素的透明度，在实际开发中会带来干扰；
      2、transparent 设置透明度时完全类似于“玻璃”一样的透明；


      文本

      • 文字阴影
      • 文字换行
      • 文字溢出
      文字阴影与边框阴影相似，可分别设置偏移量、模糊度、颜色（可设透明度）。
      单行文本溢出，需要配合overflow:hidden; white-space: nowrap;
      难理解的点：
      自已要多试着理解一下关于white-space的各个属性值之间的差异；
      上述方法只能解决单行文本的溢出问题，多行文本溢出处理可参照下面的方法，但是有比较严重的兼容性，需要慎重选择，比较完备的多行溢出需要JS辅助完成，可自行尝试。
      多行文本文字溢出处理，非标准属性，可应用于移动端
      了解常握white-space 使用

      边框

      • 边框圆角
      • 边框阴影
      • 边框图片
      其边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，我们需要重点掌握。
      3.4.1 边框圆角
      圆角处理时，脑中要形成圆、圆心、长半径、短半径的概念，正圆是椭圆的一种特殊情况。

      可分别设置长、短半径，以“/”进行分隔，遵循“1，2，3，4”规则，参考手册练习熟悉各种简写方式。

      表格运用圆角需要要 border-collapse: separate;
      当圆角半径小于或等于边框宽度时，元素内角是直角

      3.4.2 边框图片
      设置的图片将会被“切割”成九宫格形式，然后进行设置。
      “切割”完成后生成虚拟的9块图形，然后按对应位置设置背景，
      其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺。
      round 会自动调整尺寸，完整显示边框图片。
      repeat 单纯平铺多余部分，会被“裁切”而不显示。

      3.4.3 边框阴影
      设置边框阴影不会影响盒子的布局，即不会影响其兄弟元素的布局 
      spread可以与blur、h-shadow、v-shadow相互抵消，blur不可为负值
      可以设置多重边框阴影，实现更好的效果，增强立体感。

      盒模型

      • IE盒模型
      • W3C盒模型
      关于盒模型存在两种形式，分别是W3C标准盒模型和IE盒模型，如下图所示，其区别主要在于宽度和高度的计算方式，CSS3对盒模型做出了新的定义，即允许开发人员指定盒子宽度和高度的计算方式。
       IE盒模型只会出现在IE5版本和IE6+的怪异模式中。

      背景

      • 背景图尺寸
      • 背景裁切
      • 背景定位参照点
      • 多重背景
      背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
      cover 会使“最大”边，进行缩放，另一边同比缩放，铺满容器，超出部分会溢出。
      contain 会使“最小”边，进行缩放，另一边同比缩放，不一定铺满容器，会完整显示图片。
      background-size会以background-clip设定的盒模型计算
      背景图片尺寸在实际开发中应用十分广泛。
      参照手册

      渐变

      • 线性渐变
      • 径向渐变
      • 重复渐变
      渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。
      可分为线性渐变、径向渐变、重复渐变。
      线性渐变指沿着某条直线朝一个方向产生渐变效果。
      此处可配图
      径向渐变指从一个中心点开始沿着四周产生渐变效果
      此处可配图
      关于圆的知识同边框圆角章节的介绍

      伸缩布局

      • 主轴
      • 侧轴
      • 方向
      CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用，使得开发人员一下子就过上了小康的生活。
      伸缩盒模型经历了几次演变，大致分为旧版伸缩布局、过渡伸缩布局、新版伸缩布局，同样为了避免混淆，我们以学习新版伸缩布局为主。

      新版伸缩布局
      这里我们需要引入一些新的概念：
      主轴：Flex容器的主轴主要用来配置Flex项目。
      侧轴：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。
      主轴和侧轴并不是固定不变的，通过flex-direction可以调整。
      另个两个版本伸缩布局其实现思路与新版基本一致，区别在于其属性及属性值不同，熟练掌握新版伸缩布局后，要参照对比另外两个版本的不同。

      多列布局

      类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。
      参照手册

      转换

      3D坐标
      左手法则

      转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合即将学习的过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
      2D 转换
      translate(x,y)  x、y 可为负值，相对自身移动，并未脱离文档流。
      左手坐标系：伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。
      左手法则：左手握住旋转轴，竖起拇指指向旋转轴正方向，正向旋转方向就是其余手指卷曲的方向。

      过渡

      • 帧动画
      • 补间动画
      过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
      帧动画：通过一帧一帧的关键画面按照固定顺序和速度播放。如电影胶片

      动画

      贝塞尔曲线

      动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
      贝塞尔曲线限定了过渡的轨迹。
      参考手册

      媒体查询

      • html 标签形式
      • CSS 属性形式
      由于网页呈现终端设备越来越趋向于多样化，尤其是移动终端（手机），具有不同屏幕尽寸、不同分辨率，为了保证网页能十分友好的呈现，CSS3为开发人员提供了可以识别呈现终端的方法，这样便可以有针对性的为不同的呈现终端分别进行处理，被广泛应用于响应式开发中。
      html 标签方式：
      css 属性方式：
      常使用的是检测设备宽度
      参考手册

      Web字体

      • 字体格式
      • 字体图标
      开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。
      支持程度比较好，甚至IE低版本浏览器也能支持。
      字体格式
      不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。
      1、TureTpe(.ttf)格式
      .ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
      2、OpenType(.otf)格式
      .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
      3、Web Open Font Format(.woff)格式
      woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
      4、Embedded Open Type(.eot)格式
      .eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；
      5、SVG(.svg)格式
      .svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
      关于字体介绍摘自http://www.w3cplus.com/content/css3-font-face/
      了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体，通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间的区别差异。
      推荐http://www.zhaozi.cn/、http://www.youziku.com/ 查找更多中文字体

      字体图标
      其实我们可以把文字理解成是一种特殊形状的图片，反之我们是不是也可以把图片制作成字体呢？
      答案是肯定的。
      常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体库，然后就可以像使用文字一样使用图标了。
      优点：
      1、将所有图标打包成字体库，减少请求；
      2、具有矢量性，可保证清晰度；
      3、使用灵活，便于维护；
      Font Awesome 使用介绍
      http://fontawesome.dashgame.com/
      定制自已的字体图标库
      http://iconfont.cn/
      https://icomoon.io/

      兼容性

      通过 http://caniuse.com/ 可查询CSS3各特性的支持程度，一般兼容性处理的常见方法是为属性添加私有前缀，如不能解决，应避免使用，无需刻意去处理CSS3的兼容性问题。

      CSS 语法

      基础语法

      CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
      selector {declaration1; declaration2; ... declarationN }
      选择器通常是需要改变样式的 HTML 元素。
      使用花括号来包围声明。
      每条声明由一个属性和一个值组成。
      属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
      selector {property: value}
      如果值为若干单词，则要给值加引号。数字不用。
      如果要定义不止一个声明，则需要用分号将每个声明分开。
      是否包含空格不会影响 CSS 在浏览器的工作效果。
      CSS 对大小写不敏感。建议小写。


      语法与规则

      名称版本描述
      !importantCSS1提升指定样式条目的应用优先权。
      /*comment*/CSS1CSS中的注释 /* 这里是注释内容 */
      @importCSS1/3指定导入的外部样式表及目标媒体。该规则必须在样式表头部最先声明
      @charsetCSS2在外部样式表文件内使用。指定该样式表使用的字符编码。
      @mediaCSS2/3指定样式表规则用于指定的媒体类型和条件。
      @font-faceCSS3设置嵌入HTML文档的OpenType字体。
      @pageCSS2设置页面容器的版式，方向，边空等。
      @keyframesCSS3指定动画名称和动画效果。
      @supportsCSS3检测是否支持某特性。


      table 1.1 heading
      语法描述
      !important

      语法：

      Selector { sRule!important; }

      说明：

      提升指定样式规则的应用优先权。

      • IE6及以下浏览器有个比较显式的支持问题存在，!important在同一条规则集里不生效。请看下述代码：

        示例代码：

        div { color: #f00 !important; color: #000; }

        在上述代码中，IE6及以下浏览器div的文本颜色为#000，!important并没有覆盖后面的规则；其它浏览器下div的文本颜色为#f00

      • IE6及以下浏览器要使!important生效，可用以下代码：

        示例代码：

        div { color: #f00 !important; } div { color: #000; }

        在上述代码中，IE6及以下浏览器中div的文本颜色表现与其它浏览器一致，都为#f00

      /*comment*/

      语法：

      /* 这里是注释内容 */

      说明：

      用于注释CSS中的某些内容。
      @import

      语法：

      @import <url> <media_query_list>

      <media_query_list>：[<media_query>[',' <media_query>]*]?

      <media_query>：[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*

      <expression>：'('<media_feature>[:<value>]?')'

      取值：

      <url>：
      使用绝对或相对地址指定导入的外部样式表文件。可以是url(url)或者直接是一个url
      <media_query_list>：
      指定媒体类型和查询条件。

      说明：

      指定导入的外部样式表及目标媒体。
      • 该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。
      • IE使用@import无法引入超过35条的样式表。
      • 使用url(url)和直接使用url需要注意的地方：

        示例代码：

        @import url("global.css"); @import url(global.css); @import "global.css";

        以上3种方式都有效。当使用url(url)的方式时，包住路径的引号可有可无；当直接使用url时，包住路径的引号必须保留。

      • 指定媒体查询：

        示例代码：

        @import url(example.css) screen and (min-width:800px); @import url(example.css) screen and (width:800px),(color); @import url(example.css) screen and (min-device-width:500px) and (max-device-width:1024px);
      @charset

      语法：

      @charset <charset>;

      取值：

      <charset>：
      字符编码。如：@charset "utf-8";

      说明：

      在外部样式表文件内使用。指定该样式表使用的字符编码。
      • 该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。
      • 在外部css文件中写法如下：

        示例代码：

        @charset "utf-8"; body { sRules } div { sRules } ...
      @media

      语法：

      @media：<media_query_list>

      <media_query_list>：[<media_query>[',' <media_query>]*]?

      <media_query>：[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*

      <expression>：'('<media_feature>[:<value>]?')'

      取值：

      <media_type>：
      指定设备类型。媒体类型包括：参阅媒体类型。(CSS2)
      <expression>：
      指定媒体查询使用的媒体特性。这类似于CSS属性，如：max-width:960px。(CSS3)

      说明：

      指定样式表规则用于指定的媒体类型和查询条件。
      • IE8及以下只能实现CSS2中的部分，即只可以设置媒体类型。

      • 媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。

        示例代码：

        @media screen and (width:800px){ … } @import url(example.css) screen and (width:800px); &lt;link media="screen and (width:800px)" rel="stylesheet" href="example.css" /&gt; &lt;?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?&gt;

      • 列举几种使用方式：

        @media all and (width:1024px){ body{color:#f00;} } @media all and (device-height:800px){ … } @media all and (orientation:landscape){ … } @media all and (device-aspect-ratio:16/10){ … } @media all and (min-color:1){ … } @media all and (monochrome:0){ … } @media all and (grid:0){ … }
      @font-face

      语法：

      @font-face { font-family: <identifier>; src: <fontsrc> [, <fontsrc>]*; <font>; }

      <fontsrc> = <url> [format(<string>)]

      取值：

      <identifier>：
      字体名称
      <url>：
      此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径
      <string>：
      此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype, opentype, embedded-opentype, svg等
      <font>：
      定义字体相关样式

      说明：

      设置嵌入HTML文档的字体。
      • 需要兼容当前的主流浏览器，需同时使用TureTpe(.ttf)、Web Open Font Format(.woff)、Embedded Open Type(.eot)、SVG(.svg)四种字体格式。
      • 嵌入HTML文档的字体是指将OpenType字体（压缩的TrueType字体）文件映射到客户端系统，用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。即让客户端显示客户端所没有安装的字体。
      • .eot(Embedded Open Type)为IE的私有字体格式。Safari3.1开始支持.ttf(TrueType)和.otf(OpenType)。
      • 未来.woff(Web Open Font Format)将会取代.ttf(TrueType)和.otf(OpenType)两种字体格式。
      • 示例：使用一个全浏览器兼容的自定义字体

        代码如下：

        @font-face { font-family: 'diyfont'; src: url('diyfont.eot'); /* IE9+ */ src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('diyfont.woff') format('woff'), /* chrome、firefox */ url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */ }

        你需要同时提供4种格式的字体

      @page

      语法：

      @page <label> <pseudo-classes>{ sRules }

      取值：

      <label>：
      页面标识符
      <pseudo-class>：
      打印伪类:first, :left, :right

      说明：

      设置页面容器的版式，方向，边空等。
      @keyframes

      语法：

      @keyframes <identifier> { <keyframes-blocks> }

      <keyframes-blocks>：[ [ from | to | <percentage> ]{ sRules } ] [ [ , from | to | <percentage> ]{ sRules } ]*

      取值：

      <identifier>：
      identifier定义一个动画名称
      <keyframes-blocks>：
      定义动画在每个阶段的样式，即帧动画。

      说明：

      指定动画名称和动画效果。
      • @keyframes定义的动画名称用来被animation-name所使用。
      • 定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：

        示例代码：

        @keyframes testanimations { from { opacity: 1; } to { opacity: 0; } }

        其中testanimations是该动画的名字，该动画表示某个东西将逐渐消失。

      • 如果复杂的动画，可以混合<percentage>去设置某个时间段内的任意时间点的样式：

        示例代码：

        @keyframes testanimations { from { transform: translate(0, 0); } 20% { transform: translate(20px, 20px); } 40% { transform: translate(40px, 0); } 60% { transform: translate(60px, 20); } 80% { transform: translate(80px, 0); } to { transform: translate(100px, 20px); } }
      • 当然，也可以不使用关键字from和to，而都使用<percentage>：

        示例代码：

        @keyframes testanimations{ 0% { transform: translate(0, 0); } 20% { transform: translate(20px, 20px); } 40% { transform: translate(40px, 0); } 60% { transform: translate(60px, 20px); } 80% { transform: translate(80px, 0); } 100% { transform: translate(100px, 20px); } }

        注意，这里的0%不能简写成0，0是非标准语法（虽然被某些浏览器所支持）。

      @supports

      语法：

      @supports (rule)[operator (rule)]* { sRules }

      operator：or | and | not

      取值：

      rule：
      指定一条具体的CSS规则，必须使用括号包裹
      operator：
      使用or | and | not等操作符指定多条规则。

      说明：

      检测是否支持某CSS特性
      • 定义支持和不支持flex标准写法的浏览器分别使用不同的规则：

        示例代码：

        @supports ( display: flex ) { body { display: flex; } #aside { width: 210px; } #main { flex: auto; } } @supports not ( display: flex ) { #aside { float: left; width: 210px; } #main { overflow: hidden; *zoom: 1; } }

        我们可以通过类似这样的写法来给不同的终端使用差异化的方案。

      • 你也可以写多重规则来进行过滤：

        示例代码：

        @supports ( box-shadow: 2px 2px ) or ( -moz-box-shadow: 2px 2px ) or ( -webkit-box-shadow: 2px 2px ) { .demo { -moz-box-shadow: 2px 2px 0 rgba(0, 0, 0, .3); -webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, .3); box-shadow: 2px 2px 0 rgba(0, 0, 0, .3); } }

      取值与单位

      长度(Length)

      长度取值 Length Data Types

      长度取值版本描述
      <length>CSS2<number>接长度单位。

      长度单位 Length Units

      长度单位版本描述
      文本相对长度单位 Font-relative Length Units
      emCSS1相对于当前对象内文本的字体尺寸
      exCSS1相对于字符“x”的高度。通常为字体高度的一半
      chCSS3数字“0”的宽度
      remCSS3相对于根元素(即html元素)font-size计算值的倍数
      视口相对长度单位 Viewport-relative Length Units
      vwCSS3相对于视口的宽度。视口被均分为100单位的vw
      vhCSS3相对于视口的高度。视口被均分为100单位的vh
      vmaxCSS3相对于视口的宽度或高度，总是相对于大的那个。视口的宽度或高度被均分为100单位的vmax
      vminCSS3相对于视口的宽度或高度，总是相对于小的那个。视口的宽度或高度被均分为100单位的vmin
      绝对长度单位 Absolute Length Units
      cmCSS1厘米
      mmCSS1毫米
      qCSS31/4毫米（quarter-millimeters）; 1q = 0.25mm
      inCSS1英寸（inches）; 1in = 2.54cm
      ptCSS1点（points）; 1pt = 1/72in
      pcCSS1派卡（picas）; 1pc = 12pt
      pxCSS1像素（pixels）; 1px = 1/96in


      table 1.1 heading
      属性描述
      <length>

      说明：

      <number>接长度单位。
      • 特殊值0可以省略单位。例如：margin:0px可以写成margin:0
      • 一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。
      • 长度单位包括包括：相对单位和绝对单位。
      • 相对长度单位包括有： em, ex, ch, rem, vw, vh, vmax, vmin
      • 绝对长度单位包括有： cm, mm, q, in, pt, pc, px
      em

      说明：

      相对长度单位。相对于当前对象内文本的字体尺寸。
      • 如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
      ex

      说明：

      相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。
      • 如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
      ch

      说明：

      数字“0”的宽度
      rem

      说明：

      相对长度单位。相对于根元素(即html元素)font-size计算值的倍数
      vw

      说明：

      相对于视口的宽度。视口被均分为100单位的vw

      示例代码：

      h1 { font-size: 8vw; }

      如果视口的宽度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100

      vh

      说明：

      相对于视口的高度。视口被均分为100单位的vh

      示例代码：

      h1 { font-size: 8vh; }

      如果视口的高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100

      vmax

      说明：

      相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax

      示例代码：

      h1 { font-size: 8vmax; }

      如果视口的宽度是300mm，高度是200mm，那么上述代码中h1元素的字号将为24mm，即(8x300)/100，因为宽度比高度要大，所以计算的时候相对于宽度。

      vmin

      说明：

      相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin

      示例代码：

      h1 { font-size: 8vm; font-size: 8vmin; }

      如果视口的宽度是300mm，高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100，因为高度比宽度要小，所以计算的时候相对于高度。

      cm

      说明：

      厘米（Centimeters）。绝对长度单位。
      • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

      示例代码：

      div { font-size: 1cm; } p { height: 10cm; }
      mm

      说明：

      毫米（Millimeters）。绝对长度单位。
      • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

      示例代码：

      div { font-size: 10mm; } p { height: 100mm; }
      q

      说明：

      1/4毫米（quarter-millimeters）。绝对长度单位。
      • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

      示例代码：

      div { font-size: 20q; } p { height: 1000q; }
      in

      说明：

      英寸（Inches）。绝对长度单位。
      • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

      示例代码：

      div { font-size: 1in; } p { height: 10in; }
      pt

      说明：

      点（Points）。绝对长度单位。
      • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

      示例代码：

      div{font-size:10pt;} p{height:100pt;}
      pc

      说明：

      派卡（Picas）。绝对长度单位。相当于我国新四号铅字的尺寸。
      • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

      示例代码：

      div{font-size:1pc;} p{height:10pc;}
      px

      说明：

      相对长度单位。像素（Pixels）。
      • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

      示例代码：

      div{font-size:12px;} p{text-indent:24px;}

      角度(Angle)

      角度取值 Angle Data Types

      角度取值版本描述
      <angle>CSS3<number>接角度单位。

      角度单位 Angle Units

      角度单位版本描述
      degCSS3度（Degrees）
      gradCSS3梯度（Gradians）
      radCSS3弧度（Radians）
      turnCSS3转、圈（Turns）
      table 1.1 heading
      角度单位描述
      <angle>

      说明：

      <number>接角度单位。
      • 角度值的正常范围应在[0-360deg]内，例如：-10deg与350deg是等价的
      • 角度单位包括有： deg, grad, rad, turn
      deg

      说明：

      度（Degress）。一个圆共360度

      90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

      grad

      说明：

      梯度（Gradians）。一个圆共400梯度

      90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

      rad

      说明：

      弧度（Radians）。一个圆共2π弧度

      90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

      turn

      说明：

      转、圈（Turns）。一个圆共1圈

      90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

      时间(Time)

      时间取值 Time Data Types

      时间取值版本描述
      <time>CSS3<number>接时间单位。

      时间单位 Time Units

      时间单位版本描述
      sCSS3秒
      msCSS3毫秒
      table 1.1 heading
      时间单位描述
      <time>

      说明：

      <number>接时间单位。
      • 时间值不允许有负值。
      • 时间单位包括有： ms, s
      • 单位换算：1s = 1000ms
      s

      说明：

      秒
      • 1s = 1000ms
      ms

      说明：

      毫秒
      • 1s = 1000ms

      频率(Frequency)

      频率取值 Frequency Data Types

      频率取值版本描述
      <frequency>CSS3<number>接频率单位。

      频率单位 Frequency Units

      频率单位版本描述
      HzCSS3赫兹
      kHzCSS3千赫兹
      table 1.1 heading
      频率单位描述
      <frequency>

      说明：

      <number>接频率单位。
      • 频率值不允许有负值。
      • 频率单位包括有： Hz, kHz
      • 举例说明：200Hz(或200hz)表示一个低音，6kHz(或6khz)表示一个高音。
      • 单位换算：1kHz = 1000 Hz
      Hz

      说明：

      赫兹
      • 1kHz = 1000Hz
      kHz

      说明：

      千赫兹
      • 1kHz = 1000Hz

      布局(Layout-specific)

      特殊布局取值 Layout-specific Data Types

      特殊布局取值版本描述
      <fraction>CSS3<number>接剩余空间数单位。
      <grid>CSS3<number>接网格数单位。
      • 网格由不可见的横向和纵向线条组成用来对齐内容。在CSS3中，网格可以被隐式或显式的创建。网格线间的距离由fr来设定。

      特殊布局单位 Layout-specific Units

      特殊布局单位版本描述
      frCSS3剩余空间分配数
      fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。
      grCSS3网格数

      分辨率(Resolution)

      分辨率取值 Resolution Data Types

      分辨率取值版本描述
      <resolution>CSS3<number>接分辨率单位。
      • 分辨率值不允许有负值。
      • 频率单位包括有： dpi, dpcm, dppx

      分辨率单位 Resolution Units

      分辨率单位版本描述
      dpiCSS3

      说明：

      每英寸包含点的数量（dots per inch）
      • 普通屏幕通常包含96dpi，一般将2倍于此的屏幕称之为高分屏，即大于等于192dpi的屏幕，比如Mac视网膜屏就达到了192dpi（即2dppx），打印时一般会需要更大的dpi；
      • 1dppx = 96dpi
      • 1dpi ≈ 0.39dpcm
      • 1dpcm ≈ 2.54dpi
      • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

      示例代码：

      @media screen and (min-resolution: 96dpi) { ... } @media print and (min-resolution: 300dpi) { ... }
      dpcmCSS3

      说明：

      每厘米包含点的数量（dots per centimeter）
      • 普通屏幕通常包含96dpi，一般将2倍于此的屏幕称之为高分屏，即大于等于192dpi的屏幕，比如Mac视网膜屏就达到了192dpi（即2dppx），打印时一般会需要更大的dpi；
      • 1dppx = 96dpi
      • 1dpi ≈ 0.39dpcm
      • 1dpcm ≈ 2.54dpi
      • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

      示例代码：

      @media screen and (min-resolution: 28dpcm) { ... } @media print and (min-resolution: 118dpcm) { ... }
      dppxCSS3

      说明：

      每像素包含点的数量（dots per pixel）
      • 普通屏幕通常包含96dpi，一般将2倍于此的屏幕称之为高分屏，即大于等于192dpi的屏幕，比如Mac视网膜屏就达到了192dpi（即2dppx），打印时一般会需要更大的dpi；
      • 1dppx = 96dpi
      • 1dpi ≈ 0.39dpcm
      • 1dpcm ≈ 2.54dpi
      • 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

      示例代码：

      @media screen and (min-resolution: 2dppx) { ... } @media screen and (min-resolution: 1dppx) and (max-resolution: 1.9dppx) { ... }

      颜色(Color)

      颜色值 Color Data Types

      名称版本描述
      <color>CSS1/CSS3用来表示颜色的关键字或者数值规则
      <color> 包括 Color Name(颜色名称), HEX, RGB, RGBA, HSL, HSLA, transparent, currentColor
      Color NameCSS1

      说明：

      用颜色关键字来指定颜色。参阅：基础颜色关键字，系统颜色关键字，扩展颜色关键字
      HEXCSS1

      说明：

      #RRGGBB 或 #RGB

      取值：

      RR：
      红色值。十六进制正整数
      GG：
      绿色值。十六进制正整数
      BB：
      蓝色值。十六进制正整数

      说明：

      十六进制记法
      • 以上三个参数，取值范围为：00 - FF。
      • 参数必须是两位数。对于只有一位的，应在前面补零。
      • 如果每个参数各自在两位上的数字都相同，那么本单位也可缩写为 #RGB 的方式。例如：#FF8800 可以缩写为 #F80。
      • 此色彩模式与RGB色彩模式不同。
      RGBCSS2

      说明：

      RGB(R,G,B)

      取值：

      R：
      红色值。正整数 | 百分数
      G：
      绿色值。正整数 | 百分数
      B：
      蓝色值。正整数 | 百分数

      说明：

      RGB记法。
      • 以上三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。
      • 超出范围的数值将被截至其最接近的取值极限。如：rgb(300,0,0)会被解析为rgb(255,0,0)
      • 正整数值255对应百分比数值100%，如：rgb(255,255,255) = rgb(100%,100%,100%) = #FFFFFF = #FFF
      • RGB色彩是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化和它们相互之间的叠加来得到各式各样的颜色的。
      • 此RGB色彩模式与#RRGGBB/#RGB(HEX)不同。
      RGBACSS3

      说明：

      RGBA(R,G,B,A)

      取值：

      R：
      红色值。正整数 | 百分数
      G：
      绿色值。正整数 | 百分数
      B：
      蓝色值。正整数 | 百分数
      A：
      Alpha透明度。取值0~1之间。

      说明：

      RGBA记法。
      • 此色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。
      • IE6.0-8.0不支持使用 rgba 模式实现透明度，可使用 IE 滤镜处理.

        扩展知识：

        progid:DXImageTransform.Microsoft.Gradient()滤镜里的 startColorstr 参数值是 #AARRGGBB 形式的， 其中的AA是代表不透明度的十六进制，00表示完全透明，FF就是全不透明，化成十进制的范围就是0~255，剩下的 RRGGBB 就是颜色的十六进制代码。

        举例如：background: rgba(125, 0, 0, .3); 表示的是30%不透明度的红色背景。把30%的不透明度转换成十六制呢的方法如下：先计算#AA的的十进制x，x/255 = 3/10，解得x=3*255/10，然后再把x换算成十六进制，约等于4C。

        常用透明度对应16进制关系：

        .0（00） .1（19） .05（0C） .15（26）
.2（33） .3（4C） .25（3F） .35（59）
.4（66） .5（7F） .45（72） .55（8C）
.6（99） .7（B2） .65（A5） .75（BF）
.8（CC） .9（E5） .85（D8） .95（F2）

        自动转换：

        请输入请输入0-1之间的任意数字：

      HSLCSS3

      说明：

      HSL(H,S,L)

      取值：

      H：
      Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
      S：
      Saturation(饱和度)。取值为：0.0% - 100.0%
      L：
      Lightness(亮度)。取值为：0.0% - 100.0%

      说明：

      HSL记法。
      HSLACSS3

      说明：

      HSLA(H,S,L,A)

      取值：

      H：
      Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
      S：
      Saturation(饱和度)。取值为：0.0% - 100.0%
      L：
      Lightness(亮度)。取值为：0.0% - 100.0%
      A：
      Alpha透明度。取值0~1之间。

      说明：

      HSL记法。
      • 此色彩模式与HSL相同，只是在HSL模式上新增了Alpha透明度。
      transparentCSS1/CSS3

      说明：

      用来指定全透明色彩。
      • transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。
      • 在CSS1中，transparent被用来作为background-color的一个参数值，用于表示背景透明。
      • 在CSS2中，border-color也开始接受transparent作为参数值，《Open eBook(tm) Publication Structure 1.0.1》[OEB101]延伸到color也接受transparent作为参数值。
      • 在CSS3中，transparent被延伸到任何一个有color值的属性上。
      currentColorCSS3

      说明：

      在CSS1和CSS2中定义了 border-color 属性的默认值是 color 属性的值，但却没有为此定义一个相应的关键字。

      这个问题在 SVG 中被意识到了，于是在 SVG 1.0 中引入了 currentColor 关键字。

      在CSS3中扩展了颜色值包含 currentColor 关键字，并用于所有接受颜色的属性上。

      currentColor是 color 属性的值，具体意思是指：currentColor关键字的使用值是 color 属性值的计算值。
      • 如果currentColor关键字被应用在 color 属性自身，则相当于是 color: inherit。

      • 上述这些话都是什么意思呢？先看个例子

        示例代码：

        div { border: 1px solid; color: red; }

        如果你能立马知道上述代码的运行结果，那么就差不多理解 currentColor 关键字的意思了。

        上述代码将会让div拥有一个红色的边框，这就解释了 border-color 属性的默认值是 color 属性的值；

        如果将上述代码中的color属性定义删除，那么边框的颜色将取决于父元素的 color 计算值，因为 color 拥有继承性；

      文本(Textual)

      文本值 CSS Textual Data Types

      名称版本描述
      inheritCSS2.1

      说明：

      该值使得属性能够继承祖先设置。
      • inherit属于CSS-wide关键字，这表示所有的属性都可以接受该值，本手册为了与规范保持一致，未将该值放置到各属性的取值中。

      • 如何让一个不具备继承特性的属性可以继承父元素的定义？

        示例代码：

        div { position: relative; } div a { position: inherit; }

        上述代码，超链接 a 将会继承父元素的position定义，也会定义为relative

      initialCSS3

      说明：

      属性初始值。
      • initial属于CSS-wide关键字，这表示所有的属性都可以接受该值，本手册为了与规范保持一致，未将该值放置到各属性的取值中。
      • 如果你想重置某个属性为UA默认设置，那么就可以使用该值
      • 正常工作的例子：

        示例代码：

        ul { list-style: none; } .news-list { list-style: initial; }

        如上述代码，ul会被reset掉list-style，如果你想某个地方需要UA初始定义，那么就可以直接设置为initial

      unsetCSS3

      说明：

      擦除属性申明。
      • 一个属性定义了unset值，如果该属性是默认继承属性，该值等同于inherit，如果该属性是非继承属性，该值等同于initial
      • unset属于CSS-wide关键字，这表示所有的属性都可以接受该值，本手册为了与规范保持一致，未将该值放置到各属性的取值中。
      • 正常工作的例子：

        示例代码：

        div { border: unset; } div { border: initial; }

        如上述代码，2条规则的结果是相同的

      <string>CSS2

      说明：

      字符串(含转义字符串)。
      • 字符串可以由双引号或单引号包起来。
      • 转义字符串由 反斜杠(\) 开始，如：\', \"
      • 2个常规字符串例子。请看下述代码：

        示例代码：

        div:after { content: "任意字符串"; } a[title="external"] { /*...*/ }
      • 2个转义字符串例子。请看下述代码：

        示例代码：

        div:after { content: "任意字符串\"String\""; } div { /* \5b8b\4f53 = 宋体 */ font-family:'\5b8b\4f53'; }
      <url>CSS2

      语法：

      URL 是对一个资源的指针，它使用函数符号 <url> 来表示，语法如下：

      <url> = url( <string> <url-modifier>* )

      说明：

      在网页上提供一个资源地址。（图像，声频，视频或浏览器支持的其他任何资源）

      • 由于历史原因， <url> 可以不加引号，所以对于 <url> 的处理，有引号和无引号都是正确的，示例代码如下：

        示例代码：

        div { background-image: url("1.gif"); } div { background-image: url(1.gif); }

        以上2个定义是等价的。

      • 使用在@import上时，可以使用 <string> 来表示一个 <url>，也就是说可以省略 url() 符号，直接是一个资源地址，示例代码如下：

        示例代码：

        @import url(global.css); @import "global.css"; // 使用 string 表示 url

        以上2种方式都有效。

      <identifier>CSS2

      说明：

      使用用户自定义标识名作为组件取值。
      • 自定义标识区分大小写，例如test与TEST是2个不同的值
      • 自定义标识不能使用与CSS属性及属性值相同的名字
      • 正常工作的例子：

        示例代码：

        li {
    counter-increment: testname;
}
li {
    counter-reset: testname2;
}
@keyframes testanimations {
    from { opacity:1; }
    to { opacity:0; }
}
      • 无法工作的例子：

        示例代码：

        li {
    counter-increment: border;
}
li {
    counter-reset: background;
}
@keyframes auto {
    from { opacity:1; }
    to { opacity:0; }
}

      函数(Functional)

      函数值 CSS Functional Notations Data Types

      名称版本描述
      calc()CSS3

      语法：

      calc() = calc(四则运算)

      说明：

      用于动态计算长度值。
      • 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
      • 任何长度值都可以使用calc()函数进行计算；
      • calc()函数支持 "+", "-", "*", "/" 运算；
      • calc()函数使用标准的数学运算优先级规则；
      toggle()CSS3

      语法：

      toggle() = toggle(<value>#)

      说明：

      允许子孙元素使用取值序列中的值循环替换继承而来的值。

      • 每级ul使用不同的标记：

        示例代码：

        ul { list-style-type: toggle(disk, circle, square, box); } em { font-style: toggle(italic, normal); }

        在上述代码中，定义一个多级的ul，第一级使用disk markers，子孙级依次使用circle, square, box。

      生成内容(Content)

      生成内容值 CSS Content Notations Data Types

      名称版本描述
      counter()CSS2/3

      语法：

      counter() = [ counter(name) | counters(name, list-style-type) ]{1,}

      说明：

      插入计数器。
      • 在CSS2.1中counter()只能被使用在content属性上。
      • 如果想重复多次计数器可以使用 counters()
      counters()CSS2/3

      语法：

      counters() = [ counters(name, string) | counters(name, string, list-style-type) ]{1,}

      说明：

      重复插入计数器。
      • 在CSS2.1中counters()只能被使用在content属性上。

      • counters()类似于重复使用了counter()，来看个示例

        HTML：

        &lt;ol class="test"&gt; &lt;li&gt;Node &lt;ol&gt; &lt;li&gt;Node&lt;/li&gt; &lt;li&gt;Node&lt;/li&gt; &lt;/ol&gt; &lt;/li&gt; &lt;li&gt;Node&lt;/li&gt; &lt;li&gt;Node&lt;/li&gt; &lt;/ol&gt;

        counters()：

        ol { counter-reset: item; } li:before { counter-increment: item; content: counters(item, "."); }

        counter()：

        .test2 { counter-reset: item; } .test2 li { counter-increment: item; } .test2 li:before { content: counter(item)"."; } .test2 li li { counter-increment: subitem; } .test2 li li:before { content: counter(item)"."counter(subitem); }

        从上述代码可以看出，counters()适合使用在需要继承的章节上，而counter()更适合用在独立的计数场景上。

      attr()CSS2/3

      语法：

      attr() = attr(attr-name)

      说明：

      插入元素的属性值。
      • 在CSS2.1中attr()总是返回一个字符串。在CSS3中attr()可以返回多种不同的类型。
      • 在CSS2.1中可以这样使用：

        示例代码：

        a:after { content: "("attr(href)")"; font-size: 12px; } &lt;a href="http://css.doyoe.com/"&gt;CSS参考手册&lt;/a&gt;

      图像(Image)

      图像值 CSS Image Data Types

      名称版本描述
      <image>CSS1/CSS3

      语法：

      <image> = <url> | image() | image-set() | element() | cross-fade() | <gradient>

      说明：

      <image> 值表示一个2D图像，可以是url引用，图像符号，渐变符号。
      • <image> 可以用在包括：border-image-source, background-image, list-style-image, cursor 等属性上，它被用来取代 <url> 属性值，因为 <image> 值已包含了 <url> 在内。
      • 有些场景下，图像可能是无效，比如当 <url> 指向的是一个无效的图像资源时。一个无效的图像将表现为全透明，但是当无效的图像需要一些特殊行为时，可以使用 image()
      image()CSS3

      语法：

      image() = image( [ [ <image> | <string> ]? , <color>? ]! )

      说明：

      image() 用于指定图像或者图像替代。允许作者这样做：

      • 使用媒体片段（media fragments）裁减图像的部分区域;

        我们知道假设是使用背景图的话，可以通过 background-position 来决定从背景图的哪个位置开始显示

        div { background-image: url(test.png); background-position: 10px 10px; }

        上述代码会以图像 test.png 的 (10,10) 位置作为圆点以进行显示，但如果你只想显示图像一部分，就变得有点困难。

        所以之后可以这么做：

        div { background-image: image(test.png#xywh=10,10,20,20); }

        上述代码会以图像 test.png 的 (10,10) 位置作为圆点，截取一个 20x20 的矩形以进行显示。

      • 使用纯色作为图像；

        示例：

        div { background-image: image(black), url(test.png); }

        可以使用 image() 来指定使用纯色作为图像，但此时 background-color 将不再生效，因为背景色总是在所有的背景图之下。

      • 当指定的图像不能下载或者正确解码时，回退使用纯色图像；

        之前的语法中，有一个不太恰当的场景与之类似，如下代码：

        body { background: white; color: black; } div { background: url(black.png) black; color: white; }

        上述代码能保证当 black.png 加载失败，文本也仍然是可读的，因为被纯黑色的背景替代了图像，所以白色的文本仍然可见。唯一的问题是，如果图像不是矩形的，或者图像是半透明的，那么这时图像下面的黑色背景会被看到。

        所以 image() 能更好的解决这个问题，如下代码：

        body { background: white; color: black; } div { background: image(black.png, black); color: white; }

        本例的代码能保证当图像无法加载时，使用黑色背景替代，并且如果当图像正确加载时，黑色背景将不渲染，很好的解决了之前例子中存在的问题。

      • 在图像元数据中自动遵循图像的定位；
      image-set()CSS3

      语法：

      image-set() = image-set( <image-set-option># )

      <image-set-option> = [ <image> | <string> ] <resolution>

      说明：

      image-set() 可以根据用户设备的分辨率匹配合适的图像。

      • 为不同的设备分配合适得图像;

        示例

        div { background-image: image-set( "test.png" 1x, "test-2x.png" 2x, "test-print.png" 600dpi ); }

        上述代码将会为普通屏幕使用 test.png，为高分屏使用 test-2x.png，如果更高的分辨率则使用 test-print.png，比如印刷。

      <gradient>CSS3

      语法：

      <gradient> = linear-gradient() | repeating-linear-gradient()| radial-gradient() | repeating-radial-gradient()

      说明：

      <gradient> 允许使用简单的语法实现颜色渐变，以便UA在渲染页面自动生成图像。
      • 渐变在一个拥有尺寸的盒子中被生成，被称之为渐变盒，但是渐变本身并没有内在的尺寸，也就说如果在一个没有尺寸的容器上定义渐变，将无法被呈现。

      • <gradient> 可以应用在所有接受图像的属性上

        示例：

        background-image: linear-gradient(white, gray); list-style-image: radial-gradient(circle, #006, #00a 90%, #0000af 100%, white 100%);
      linear-gradient()CSS3

      语法：

      <linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

      <side-or-corner> = [left | right] || [top | bottom]

      <color-stop> = <color> [ <length> | <percentage> ]?

      取值：

      下述值用来表示渐变的方向，可以使用角度或者关键字来设置：

      <angle>：
      用角度值指定渐变的方向（或角度）。
      to left：
      设置渐变为从右到左。相当于: 270deg
      to right：
      设置渐变从左到右。相当于: 90deg
      to top：
      设置渐变从下到上。相当于: 0deg
      to bottom：
      设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。

      <color-stop> 用于指定渐变的起止颜色：

      <color>：
      指定颜色。
      <length>：
      用长度值指定起止色位置。不允许负值
      <percentage>：
      用百分比指定起止色位置。

      说明：

      用线性渐变创建图像。
      • 如果想创建以对角线方式渐变的图像，可以使用 to top left 这样的多关键字方式来实现。

      • 用默认的渐变方向绘制一个最简单的线性渐变

        示例代码：


        （图一）

        linear-gradient(#fff, #333); linear-gradient(to bottom, #fff, #333); linear-gradient(to top, #333, #fff); linear-gradient(180deg, #fff, #333); linear-gradient(to bottom, #fff 0%, #333 100%);

        以上几句代码都可以实现如（图一）的渐变效果

      radial-gradient()CSS3

      语法：

      <radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)

      <position> = [ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?

      <shape> = circle | ellipse

      <size> = <extent-keyword> | [ <circle-size> || <ellipse-size> ]

      <extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner

      <circle-size> = <length>

      <ellipse-size> = [ <length> | <percentage> ]{2}

      <shape-size> = <length> | <percentage>

      <color-stop> = <color> [ <length> | <percentage> ]?

      取值：

      <position> 确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center

      <percentage>①：
      用百分比指定径向渐变圆心的横坐标值。可以为负值。
      <length>①：
      用长度值指定径向渐变圆心的横坐标值。可以为负值。
      left：
      设置左边为径向渐变圆心的横坐标值。
      center①：
      设置中间为径向渐变圆心的横坐标值。
      right：
      设置右边为径向渐变圆心的横坐标值。
      <percentage>②：
      用百分比指定径向渐变圆心的纵坐标值。可以为负值。
      <length>②：
      用长度值指定径向渐变圆心的纵坐标值。可以为负值。
      top：
      设置顶部为径向渐变圆心的纵坐标值。
      center②：
      设置中间为径向渐变圆心的纵坐标值。
      bottom：
      设置底部为径向渐变圆心的纵坐标值。

      <shape> 确定圆的类型

      circle：
      指定圆形的径向渐变
      ellipse：
      指定椭圆形的径向渐变。

      <extent-keyword> circle | ellipse 都接受该值作为 size

      closest-side：
      指定径向渐变的半径长度为从圆心到离圆心最近的边
      closest-corner：
      指定径向渐变的半径长度为从圆心到离圆心最近的角
      farthest-side：
      指定径向渐变的半径长度为从圆心到离圆心最远的边
      farthest-corner：
      指定径向渐变的半径长度为从圆心到离圆心最远的角

      <circle-size> circle 接受该值作为 size

      <length>：
      用长度值指定正圆径向渐变的半径长度。不允许负值。

      <ellipse-size> ellipse 接受该值作为 size

      <length>：
      用长度值指定椭圆径向渐变的横向或纵向半径长度。不允许负值。
      <percentage>：
      用百分比指定椭圆径向渐变的横向或纵向半径长度。不允许负值。

      <color-stop> 用于指定渐变的起止颜色：

      <color>：
      指定颜色。
      <length>：
      用长度值指定起止色位置。不允许负值
      <percentage>：
      用百分比指定起止色位置。不允许负值

      说明：

      用径向渐变创建图像。

      • 用默认的渐变方向绘制一个最简单的径向渐变

        示例代码：

        radial-gradient(circle, #f00, #ff0, #080); radial-gradient(circle at center, #f00, #ff0, #080); radial-gradient(circle at 50%, #f00, #ff0, #080); radial-gradient(circle farthest-corner, #f00, #ff0, #080);

        以上几句代码都可以实现如（图一）的渐变效果

      • <shape> 和 <size> 使用注意：

        错误代码：

        radial-gradient(circle 50px 50px, #f00, #ff0, #080);

        因为 circle 是正圆，一个值就能表示其直径长度，所以此时 <size> 只能是一个值。

        错误代码：

        radial-gradient(circle 50%, #f00, #ff0, #080);

        circle 不接受 <size> 的值是 <percentage>。

      • 不通过 <shape> 来表示圆和椭圆的方法：

        以下2行代码都可以表示一个圆：

        radial-gradient(100px, #f00, #ff0, #080); /* 1 */ radial-gradient(100px 100px, #f00, #ff0, #080); /* 2 */ radial-gradient(50px 100px, #f00, #ff0, #080); /* 3 */

        代码1：只给出100px，所以被当成是正圆的半径，于是就能确定一个直径为100px的圆；

        代码2：给出了2个值，按理应该是要画一个椭圆的，但2个值相等，所以这个椭圆其实此时是个正圆形态。需要注意的是，代码2如果加上 circle，那将是错误语法，因为这是2个值只有椭圆才接受；

        代码3：表示了一个水平半径为50px，垂直半径为100px的椭圆

      repeating-linear-gradient()CSS3

      语法：

      <repeating-linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

      <side-or-corner> = [left | right] || [top | bottom]

      <color-stop> = <color> [ <length> | <percentage> ]?

      取值：

      下述值用来表示渐变的方向，可以使用角度或者关键字来设置：

      <angle>：
      用角度值指定渐变的方向（或角度）。
      to left：
      设置渐变为从右到左。相当于: 270deg
      to right：
      设置渐变从左到右。相当于: 90deg
      to top：
      设置渐变从下到上。相当于: 0deg
      to bottom：
      设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。

      <color-stop> 用于指定渐变的起止颜色：

      <color>：
      指定颜色。
      <length>：
      用长度值指定起止色位置。不允许负值
      <percentage>：
      用百分比指定起止色位置。

      说明：

      用重复的线性渐变创建图像。
      • repeating-linear-gradient()的语法与linear-gradient()相同。

      • 示例代码：


        （图一）

        repeating-linear-gradient(#f00, #ff0 10%, #f00 15%); repeating-linear-gradient(to bottom, #f00, #ff0 10%, #f00 15%); repeating-linear-gradient(180deg, #f00, #ff0 10%, #f00 15%); repeating-linear-gradient(to top, #f00, #ff0 10%, #f00 15%);

        以上几句代码都可以实现如（图一）的渐变效果

      • 其实可以使用 linear-gradient() 做出 repeating-linear-gradient()的效果

        暴力实现上述（图一）的效果：

        repeating-linear-linear-gradient(#f00, #ff0 10%, #f00 15%, #ff0 25%, #f00 30%, #ff0 40%, #f00 45%, #ff0 55%, #f00 60%, #ff0 70%, #f00 75%, #ff0 85%, #f00 90%, #ff0);

        以上几句代码都可以实现如（图一）的渐变效果

        利用 background-size 实现上述（图一）的效果：

        background: linear-gradient(#f00, #ff0 67%, #f00); background-size: 100% 15%;

        使用 background-size 约束渐变图像的大小，然后通过 background-repeat 来纵向平铺

      repeating-radial-gradient()CSS3

      语法：

      <repeating-radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)

      <position> = [ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?

      <shape> = circle | ellipse

      <size> = <extent-keyword> | [ <circle-size> || <ellipse-size> ]

      <extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner

      <circle-size> = <length>

      <ellipse-size> = [ <length> | <percentage> ]{2}

      <shape-size> = <length> | <percentage>

      <color-stop> = <color> [ <length> | <percentage> ]?

      取值：

      <position> 确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center

      <percentage>①：
      用百分比指定径向渐变圆心的横坐标值。可以为负值。
      <length>①：
      用长度值指定径向渐变圆心的横坐标值。可以为负值。
      left：
      设置左边为径向渐变圆心的横坐标值。
      center①：
      设置中间为径向渐变圆心的横坐标值。
      right：
      设置右边为径向渐变圆心的横坐标值。
      <percentage>②：
      用百分比指定径向渐变圆心的纵坐标值。可以为负值。
      <length>②：
      用长度值指定径向渐变圆心的纵坐标值。可以为负值。
      top：
      设置顶部为径向渐变圆心的纵坐标值。
      center②：
      设置中间为径向渐变圆心的纵坐标值。
      bottom：
      设置底部为径向渐变圆心的纵坐标值。

      <shape> 确定圆的类型

      circle：
      指定圆形的径向渐变
      ellipse：
      指定椭圆形的径向渐变。

      <extent-keyword> circle | ellipse 都接受该值作为 size

      closest-side：
      指定径向渐变的半径长度为从圆心到离圆心最近的边
      closest-corner：
      指定径向渐变的半径长度为从圆心到离圆心最近的角
      farthest-side：
      指定径向渐变的半径长度为从圆心到离圆心最远的边
      farthest-corner：
      指定径向渐变的半径长度为从圆心到离圆心最远的角

      <circle-size> circle 接受该值作为 size

      <length>：
      用长度值指定正圆径向渐变的半径长度。不允许负值。

      <ellipse-size> ellipse 接受该值作为 size

      <length>：
      用长度值指定椭圆径向渐变的横向或纵向半径长度。不允许负值。
      <percentage>：
      用百分比指定椭圆径向渐变的横向或纵向半径长度。不允许负值。

      <color-stop> 用于指定渐变的起止颜色：

      <color>：
      指定颜色。
      <length>：
      用长度值指定起止色位置。不允许负值
      <percentage>：
      用百分比指定起止色位置。不允许负值

      说明：

      用重复的径向渐变创建图像。
      • repeating-radial-gradient()的语法与radial-gradient()相同。

      • 示例代码：

        repeating-radial-gradient(circle closest-side, #f00, #ff0 10%, #f00 15%);

      数字(Numeric)

      数字值 CSS Numeric Data Types

      名称版本描述
      <number>CSS2

      说明：

      浮点数。
      • Number值可能是约束在一定范围内的，如果超过了这个范围，申明将被忽略。
      • 列举几个使用场景。请看下述代码：

        示例代码：

        div { line-height: 1.5; } div { opacity: .5; }

        在上述代码中，opacity属性的值就是被约束在[0.0-1.0]这个范围内的，如果超过了这个范围，其计算结果将截取到与之最相近的值。

      <integer>CSS2

      说明：

      整数。
      • Integer值可能是约束在一定范围内的，如果超过了这个范围，申明将被忽略。
      • 列举几个使用场景。请看下述代码：

        示例代码：

        div { z-index: 10; border-image-slice: 5; }
      <percentage>CSS2

      说明：

      <number>接%
      • 百分比总是相对于另外一个值才存在的。

        示例代码：

        div { font-size: 12px; } .test { font-size: 200%; }
      • 百分比的单位是：%

      高级语法

      选择器的分组

      可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。

      h1,h2,h3,h4,h5,h6 {
  color: green;
  }

      继承及其问题

      继承

      有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。

      继承性是从自己开始，直到最小的元素。

      哪些属性能继承？

      color、 text-开头的、line-开头的、font-开头的。

      这些关于文字样式的，都能够继承； 所有关于盒子的、定位的、布局的属性都不能继承。

      问题

      根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则：

      body {
     font-family: Verdana, sans-serif;
     }

      根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）。

      通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。

      但是在那个浏览器大战的血腥年代里，这种情况就未必会发生，那时候对标准的支持并不是企业的优先选择。比方说，Netscape 4 就不支持继承，它不仅忽略继承，而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题，在表格内的字体样式会被忽略。我们又该如何是好呢？

      友善地对待Netscape 4

      幸运地是，你可以通过使用我们称为 "Be Kind to Netscape 4" 的冗余法则来处理旧式浏览器无法理解继承的问题。

      body  {
     font-family: Verdana, sans-serif;
     }

p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

      4.0 浏览器无法理解继承，不过他们可以理解组选择器。这么做虽然会浪费一些用户的带宽，但是如果需要对 Netscape 4 用户进行支持，就不得不这么做。

      继承是一个诅咒吗？

      如果你不希望 "Verdana, sans-serif" 字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则：

      body  {
     font-family: Verdana, sans-serif;
     }

td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

p  {
     font-family: Times, "Times New Roman", serif;
     }

      层叠性

      层叠性：就是css处理冲突的能力。 所有的权重计算，没有任何兼容问题！

      CSS像艺术家一样优雅，像工程师一样严谨。

      多重样式层叠次序

      当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

      一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

      1. 浏览器缺省设置
      2. 外部样式表
      3. 内部样式表（位于 <head> 标签内部）
      4. 内联样式（在 HTML 元素内部）

      因此，内联样式（在 HTML 元素内部）拥有最高的优先权。


      当选择器，选择上了某个元素的时候，那么要这么统计权重：

      id的数量，类的数量，标签的数量

      权重问题大总结

      1） 先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，听后写的为准。
      2） 如果没有选中，那么权重是0。如果大家都是0，就近原则。
      3） !important标记

      ■ 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。

      ■ 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比选择器权重，如果权重再一样重，谁写在后面听谁的。继承来的 !important 属性 权重任然为0。

      ■ important是英语里面的“重要的”的意思。我们可以通过语法：

      1 k:v !important;

      来给一个属性提高权重。这个属性的权重就是无穷大。

      一定要注意语法：
      正确的：
      1 font-size:60px !important;
      错误的：
      1 font-size:60px; !important;   → 不能把!important写在外面
      1 font-size:60px important;    → 不能忘记感叹号

      !important需要强调3点：

      1） !important提升的是一个属性，而不是一个选择器

      1  p{
      2    color:red !important;   → 只写了这一个!important，所以就字体颜色属性提升权重
      3    font-size: 100px ;      → 这条属性没有写!important，所以没有提升权重
      4  }
      5  #para1{
      6    color:blue;
      7    font-size: 50px;
      8  }
      9  .spec{
      10   color:green;
      11   font-size: 20px;
      12 }
      <p id="para1" class="spec">what kind of color and font-size? </p>
      所以，综合来看，字体颜色是red（听important的）；字号是50px（听id的）;

      2） !important无法提升继承的权重，该是0还是0

      比如HTML结构：

      1  <div>
      2    <p>哈哈哈哈哈哈哈哈</p>
      3  </div>
      有CSS样式：
      1  div{
      2    color:red !important;
      3  }
      4  p{
      5    color:blue;
      6  }
      由于div是通过继承性来影响文字颜色的，所以!important无法提升它的权重，权重依然是0。
      干不过p标签，因为p标签是实实在在选中了，所以字是蓝色的（以p为准）。

      3）!important不影响就近原则

      如果大家都是继承来的，按理说应该按照“就近原则”，那么important能否影响就近原则呢？

      答案是：不影响。远的，永远是远的。不能给远的写一个important，干掉近的。


      ! important做站的时候，尽量不要使用。因为会让css写的很乱。

      现在，我们知道层叠性能比较很多东西：

      选择器的写法权重，谁离的近，谁写在下面。


      不进位，实际上能进位（255个标签，等于1个类名）但是没有实战意义！



      如果权重一样，那么以后出现的为准：



      ================================我是华丽丽的分界线=================================

      如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。



      如果大家都是0，那么有一个就近原则：谁描述的近，听谁的。



      标准文档流

      标准文档流：
      块级元素（可设置宽高，但不能并排） -- 行内元素（可以并排，但不能设置宽高） -- 块级元素和行内元素相互转换（但不改变本质） 

      脱离标准流：
      不分块级元素和行内元素，
      元素既可以设置宽高，又可以做并排。

      标准流有哪些微观现象？

      1） 空白折叠现象：

      行内元素中，多个连续的空格或换行会折叠为一个空格。

      比如，如果我们想让img标签之间没有空隙，必须紧密连接：

      <img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" />

      2） 高矮不齐，底边对齐：

      3） 自动换行，一行写不满，换行写。

      4）标准文档流中，margin的塌陷现象，竖直方向的margin不叠加，以较大的为准。

      如果不在标准流，比如盒子都浮动了，那么两个盒子之间没有塌陷现象。

      标准文档流中的标签等级

      标准文档流等级森严。标签分为两种等级：

      块级元素

      ● 霸占一行，不能与其他任何元素并列

      ● 能接受宽、高

      ● 如果不设置宽度，那么宽度将默认变为父亲的100%。

      行内元素

      ● 与其他行内元素并排

      ● 不能设置宽、高，但可以设置 margin 和 padding。默认的宽度，就是文字的宽度。高度为零。


      HTML 中标签分类：文本级、容器级

      文本级：p、span、a、b、i、u、em

      容器级：div、h系列、li、dt、dd

      CSS 中标签分类：行内元素、块级元素

      和 HTML 的很像，就 p 不一样

      所有的文本级标签，都是行内元素，除了p，p是个文本级，但是是个块级元素。

      所有的容器级标签都是块级元素。


      块级元素和行内元素的相互转换

      块级元素可以设置为行内元素

      行内元素可以设置为块级元素

        div{
            display: inline;
            background-color: pink;
            width: 500px;
            height: 500px;
        }

      display是“显示模式”的意思，用来改变元素的行内、块级性质

      inline就是“行内”。

      一旦，给一个标签设置

      display: inline;

      那么，这个标签将立即变为行内元素。此时它和一个span无异：

      ● 此时这个div不能设置宽度、高度；

      ● 此时这个div可以和别人并排了

       

      同样的道理，

      span{
               display: block;
                width: 200px;
              height: 200px;
               background-color: pink;
           }

      “block”是“块”的意思

      让标签变为块级元素。此时这个标签，和一个div无异：

      ● 此时这个span能够设置宽度、高度

      ● 此时这个span必须霸占一行了，别人无法和他并排

      ● 如果不设置宽度，将撑满父亲

       

      标准流里面限制非常多，标签的性质恶心。比如，我们现在就要并排、并且就要设置宽高。在标准流内是不能实现的。

      所以，移民！脱离标准流！

      脱离标准流

      脱标的元素可以设置宽、高，可以在一行内并排

      即脱离标准流的目的是为了让元素既可以设置宽高，同时又可以做并排。

      标准文档流：
      块级元素（可设置宽高，但不能并排） -- 行内元素（可以并排，但不能设置宽高） -- 块级元素和行内元素相互转换（但不改变本质） 

      脱离标准流：
      不分块级元素和行内元素，
      元素既可以设置宽高，又可以做并排。

      css中一共有三种手段，使一个元素脱离标准文档流：

      1） 浮动

      2） 绝对定位

      3） 固定定位

      浮动

      浮动宏观的看，就是做“并排”的，且可以设置宽高。
      浮动是css里面布局用的最多的属性。

      浮动的性质

      浮动的性质：脱标、贴边、字围、收缩。

      关于浮动我们要强调一点，浮动这个东西，我们在初期一定要遵循一个原则：
      永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。即大家一起脱标。

      浮动的元素脱标

      证明1：


      证明2：

      一个span标签不需要转成块级元素（不用 display：block；），就能够设置宽度、高度了。所以能够证明一件事儿，就是所有脱标的标签已经不区分行内、块了。也就是说，一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。所以标准流里面的法律、规则都不适用了。

      1         span{
      2              float: left;
      3              width: 200px;
      4              height: 200px;
      5              background-color: orange;
      6         }

      浮动的元素互相贴靠

      如果有足够空间，那么就会靠着2哥。如果没有足够的空间，那么会靠着1号大哥。

      如果没有足够的空间靠着1号大哥，自己去贴左墙。


      浮动的元素有“字围”效果

      浮动的盒子能遮挡住标准流内的盒子，但遮挡不了盒子里面的文字。

      浮动的元素收缩

      收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为文字的宽度（这点非常像行内元素）。

      清除浮动（ 闭合浮动）

      清除浮动的目的： 就是为了解决 父 盒子高度为 0 的问题。

      若一个父盒子没有设置高度，那么可以被盒子的内容撑出高度；但一个父盒子是不能被浮动的儿子撑出高度的。因为浮动的元素脱离了标准流。

      浮动的元素若存在有高度的父盒子，则浮动的盒子相对该盒子的宽高来作为浮动的参考坐标；若不存在有高度的父盒子，则浮动的元素以整个页面为参考坐标进行浮动。

      清除浮动的方法： 加高；clear：both；造墙；overflow：hidden；伪元素；双伪元素。 

      实战：大的地方隔大墙，小的部分加 overflow：hidden。

      来看一个实验：现在有两个div，div身上没有任何属性（没有脱标，块级元素）。但每个div中都有li，这些li都是浮动的。

      li{
         float: left;
         width: 90px;
         height: 40px;
         background-color: gold;
         text-align: center;
      }

      <div class="box1">
         <      ul>
            <      li>HTML</li>
            <      li>CSS</li>
            <      li>JS</li>
            <      li>HTML5</li>
            <      li>设计模式</li>
         </      ul>
      </      div>

      <      div class="box2">
         <      ul>
            <      li>学习方法</li>
            <      li>英语水平</li>
            <      li>面试技巧</li>
         </      ul>
      </      div>

      我们本以为这些li，会分为两排，但是，第二组中的第1个li，去贴靠第一组中的最后一个li了。


      原因就是因为两个div盒子没有高度，不能给自己浮动的孩子们，撑起一个容器。

      标准流中，两个 div 盒子若没有设置高度，则可以被盒子里面的内容撑出高度；但若盒子里面的所有内容浮动后，盒子里面的内容就脱离了标准流，两个 div 盒子就没有了高度，不能为自己浮动的孩子撑起一个容器，故会发生两个 div 块级元素中浮动的元素相互贴靠的现象。

      方法1：给浮动元素的祖先元素加足够高度

      如果一个元素要浮动，那么它的祖先元素一定要有足够的高度。有足够高度的盒子，才能关住浮动，不受周围浮动元素的影响。只要浮动在一个有足够高度的盒子中，那么这个浮动就不会影响后面的浮动元素。若第一个浮动的盒子没有加高度或没有加足够的高度，那么即使第二个浮动的盒子加了足够的盒子，也会发生贴边现象。

      但是，工作上，不会给所有的盒子加高度，因为麻烦，因为能被内容撑高！并且加了高度不能适应页面的快速变化。
      *{
               margin: 0;
         padding: 0;
      }
      div{
               height: 50px;　　　　　　　　→ 加足够 height
         border: 1px solid #000;
      }
      li{
               float: left;
         width: 90px;
         height: 40px;
         background-color: gold;
         text-align: center;
      }
      <div class="box1">                     → 加足够 height
         <      ul>
            <      li>HTML</li>
            <      li>CSS</li>
            <      li>JS</li>
            <      li>HTML5</li>
            <      li>设计模式</li>
         </      ul>
      </      div>

      <      div class="box2">                     → 加足够 height
         <      ul>
            <      li>学习方法</li>
            <      li>英语水平</li>
            <      li>面试技巧</li>
         </      ul>
      </      div>

      方法2：clear:both

      最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。
      <div class="box1">
         <      ul>
            <      li>HTML</li>
            <      li>CSS</li>
            <      li>JS</li>
            <      li>HTML5</li>
            <      li>设计模式</li>
         </      ul>
      </      div>

      <      div class="box2">                  → 加 clear：both；属性
         <      ul>
            <      li>学习方法</li>
            <      li>英语水平</li>
            <      li>面试技巧</li>
         </      ul>
      </      div>

      clear就是清除，both指的是左浮动、右浮动都要清除。意思就是：清除左右盒子对我的影响。

      这种方法有一个非常大的、致命的问题，上下margin失效了。两个div之间，没有任何的间隙了。本质原因两个div没有高度。

      方法3-1：外墙法（额外标签法）

      在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。

      墙用自己的身高当做了间隙。


      <div class="box1">
         <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>HTML5</li>
            <li>设计模式</li>
         </ul>
      </div>

      <div class="cl h8"></div>

      <div class="box2">
         <ul>
            <li>学习方法</li>
            <li>英语水平</li>
            <li>面试技巧</li>
         </ul>
      </div>
      *{
         margin: 0;
         padding:0;
      }
      li{
         float: left;
         width: 120px;
         height: 40px;
         background-color: orange;
         text-align: center;
      }
      .cl{
         clear: both;
      }
      .h8{
         height: 8px;
         _font-size:0;
      }
      隔墙法好用，但是两个div，还是没有高度。上下 margin 仍然失效。
      隔墙法需注意 IE6 的微型盒子兼容问题。

      方法3-2：内墙法（额外标签法）

      本质：一个没有设置高度的父亲，是不能被浮动的儿子撑出高度的。

      内墙法的优点就是，能够让第二个盒子中浮动的元素不去追第一个盒子中浮动的元素，并且能把第一个盒子撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。


      <div class="box1">
         <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>HTML5</li>
            <li>设计模式</li>
         </ul>

         <div class="cl h16"></div>

      </div>

      <div class="box2">
         <ul>
            <li>学习方法</li>
            <li>英语水平</li>
            <li>面试技巧</li>
         </ul>
      </div>
      *{
         margin: 0;
         padding:0;
      }
      .box1{
         background-color: gold;
      }
         li{
            float: left;
            width: 120px;
            height: 40px;
            background-color: orange;
            text-align: center;
         }
         .cl{
            clear: both;
         }
         .h16{
            height: 16px;
         }
      缺陷：第二个div，没有高度，除非再修一堵墙。margin 生效。

      公式：

      方法4：overflow:hidden;

      overflow就是“溢出”的意思， hidden就是“隐藏”的意思。

      1 overflow:hidden;

      表示“溢出隐藏”。所有溢出边框的内容，都要隐藏掉。

      本意就是清除溢出到盒子外面的文字。但是，前端开发工程师又发现了，它能做偏方。

      overflow: hidden;   触发 bfc 模式 就不用清楚浮动

      一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。这是一个偏方。

      并且,overflow:hidden;能够让margin生效。

      1         div{
2               width: 400px;
3               border: 10px solid black;
4               overflow: hidden;
5           }


      *{
         margin: 0;
         padding: 0;
      }
      div{
         width: 400px;
         overflow: hidden;
         border: 10px solid black;
      }
      .p1{
         float: left;
         width: 100px;
         height: 150px;
         background-color: red;
      }
      .p2{
         float: left;
         width: 100px;
         height: 380px;
         background-color: yellow;
      }
      .p3{
         float: left;
         width: 100px;
         height: 120px;
         background-color: blue;
      }
      <div>                                           → overflow：hidden；
         <      p class="p1"></p>
         <      p class="p2"></p>
         <      p class="p3"></p>
      </      div>
      注意 IE6 的兼容问题，IE6 不支持 overflow：hidden 清除浮动。
      解决方法：加一条 _zoom:1;
      1  overflow: hidden;
2  _zoom:1;       --→ 伴生属性。

      方法5：伪元素

          .clearfix:after {
                content:””;
                Visibility:hidden;  
                Display:block; 
                Height:0;
                Clear:both;
           }
          .clearfix{
                Zoom:1;
           }

      双伪元素 

      .clearfix:before,.clearfix:after{
    display: table;
    content: "";
}
      
.      clearfix:after {
    clear: both;
}
      
.      clearfix {
    zoom: 1;
}

      绝定定位

      固定定位

      盒模型

      盒模型box model，什么是盒子？所有的标签都是盒子。无论是div、span、a都是盒子。图片、表单元素一律看做文本。

      盒模型的两种形式

      关于盒模型存在两种形式，分别是W3C标准盒模型和IE盒模型，如下图所示，其区别主要在于宽度和高度的计算方式，CSS3对盒模型做出了新的定义，即允许开发人员指定盒子宽度和高度的计算方式。


      IE盒模型

      IE盒模型只会出现在IE5版本和IE6+的怪异模式中。

      IE模型下 width = padding + content + border;

      W3C盒模型

      W3C盒模型下 width = content

      CSS3中的盒模型

      CSS3 中可以自定义盒模型的呈现方式：

      box-sizing: border-box;

      盒模型的宽高以border为界，即包含border和padding
      width = border + padding + content

      box-sizing: content-box;

      盒模型的宽高以内容为界，不包含border和padding
      width = content

      盒模型的构成

      盒模型的主要构成：content、padding、border、margin。

      width、height：默认情况下 width、height是内容的宽度、高度，而不是盒子的宽度、高度。

      padding：内边距，边框和文字内容之间的距离。padding有颜色。

      border：边框，3要素，4条边。3要素。
      border-width、border-style、border-color；4条边：border-top、border-right、border-bottom、border-left。

      margin：外边距

      网页稳定性：

              width 和 height 最稳定

              其次 padding    

              最后才考虑 margin

      width 和 height

      宽度和真实占有宽度
      高度和真实占有高度

      真实占有宽度=  左border  +  左padding  +  width  +  右padding  +  右border

      真实占有高度=  上border  +  上padding  +  height +  下padding  +  下border

      如果想保持一个盒子的真实占有宽度不变，那么加width就要减左或右padding。加左或右padding就要减width。

      如果想保持一个盒子的真实占有高度不变，那么加height就要减上或下padding。加上或下padding就要减height。

      如果想保持一个盒子的真实占有宽高不变，那么加width或height就要减padding。加padding就要减width和height。

      若盒子没有高，就只表示定位。

      宽度可以继承，和父亲一样宽；高度不可以继承，和内容一样高。

      margin

      margin的塌陷现象（标准流）

      水平方向无塌陷现象。

      标准文档流中，竖直方向的margin不叠加，以较大的为准。

      如果不在标准流，比如盒子都浮动了，那么两个盒子之间没有塌陷现象，margin 可以叠加.

      标准流：


      非标准流：


      盒子左右居中 margin:0 auto;（标准流）

      margin的值可以为auto，表示自动。当left、right两个方向，都是auto的时候，盒子居中了。
      margin-left: auto;
      margin-right: auto;

      简写为

      margin: 0 auto;

      注意：

      1） 使用margin:0 auto; 的盒子，必须有明确的width（不写width 通栏100%）。

      2） 只有标准流的盒子，才能使用margin:0 auto; 居中。

      也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;

      3） margin:0 auto;是在居中盒子，不是居中文本。

      文本的居中，要使用 text-align:center;

      text-align:left;     没啥用，因为默认居左
      text-align:right;    文本居右

      善于使用父亲的padding，而不是儿子的margin

      如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是这“行”。所以，父亲整体也掉下来了

      这个p有一个margin-top踹父亲，试图将自己下移

      1     <div>
2           <p></p>
3     </div>

      结果：



      margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。

      所以，我们一定要善于使用父亲的padding，而不是儿子的margin。但加 padding 需要减宽或高。


      padding

      盒模型的 padding，不是直接作用在文字上的，而是作用在“行”上的。

      内边距  会影响盒子大小   
      行内元素   尽量不用  上下的padding和margin  
      继承的宽度， padding不会撑开盒子，但不能大于盒子的宽度 

      padding，内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。

      也就是说，background-color将填充所有boder以内的区域。

      padding 可以出现溢出现象。

      一些元素，默认带有padding，比如ul标签。

      所以，我们为了做站的时候，便于控制，总是喜欢清除这个默认的padding

      1        *{
      2              margin: 0;
      3              padding: 0;
      4         }

      *的效率不高，所以我们使用并集选择器，罗列所有需要清除默认margin和padding的标签

      border

      边框有三个要素：粗细、线型、颜色。

      颜色如果不写，默认是黑色。另外两个属性不写，要命了，显示不出来边框。

      边框的线型显示在不同浏览器中有细微差别。

      如果公司里面的设计师，追求极高的页面还原度，那么不能使用css来制作边框。

      就要用到图片，就要切图了。所以，比较稳定的就几个：solid、dashed、dotted


      伪类

      同一个标签，根据用户的某种状态不同，有不同的样式。这就叫做“伪类”。

      类就是工程师加的，比如div属于box类，很明确，就是属于box类。但是a属于什么类？不明确。因为要看用户有没有点击、有没有触碰。所以，就叫做“伪类”。

      伪类用冒号来表示。

      a标签的伪类

      a标签有4种伪类。

      :link            表示， 用户没有点击过这个链接的样式。 是英语“链接”的意思。

      :visited       表示， 用户访问过了这个链接的样式。 是英语“访问过的”的意思。

      :hover        表示， 用户鼠标悬停的时候链接的样式。 是英语“悬停”的意思。

      :active        表示， 用户用鼠标点击该链接，但是不松手，此刻的样式。 是英语“激活”的意思。

      这四种状态，在css中，必须按照固定的顺序写：

      a:link 、a:visited 、a:hover 、a:active

      如果不按照顺序，那么将失效。“爱恨准则”love hate。必须先爱，后恨。

      超级链接的美化

      a标签在使用的时候，非常的难。因为不仅仅要控制a这个盒子，也要控制它的伪类。

      我们一定要将a标签写在前面，:link、:visited、:hover、:active这些伪类写在后面。

      a标签中，描述盒子； 伪类中，描述文字的样式、背景。

      1          .nav ul li a{
      2               display: block;
      3               width: 120px;
      4               height: 40px;
      5           }
      6           .nav ul li a:link ,.nav ul li a:visited{
      7               text-decoration: none;
      8               background-color: yellowgreen;
      9               color:white;
      10           }
      11          .nav ul li a:hover{
      12              background-color: purple;
      13              font-weight: bold;
      14              color:yellow;
      15          }

      所有的a不继承text、font这些属性。因为a自己有一个伪类的权重。
      a 标签的样式必须设置到 a。

      最标准的，就是把link、visited、hover都要写。但是前端开发工程师在大量的实践中，发现不写link、visited浏览器也挺兼容。所以这些“老油条”们，就把a标签简化了：

      a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态。

      1          .nav ul li a{
      2                display: block;
      3                width: 120px;
      4                height: 50px;
      5                text-decoration: none;
      6                background-color: purple;
      7                color:white;
      8           }
      9          .nav ul li a:hover{
      10               background-color: orange;
      11          }

      其他标签的伪类


      CSS 定位

      定位的盒子如果不设置 left，top等值，其将仍处于标准流中原来的位置。

      定位有四种，分别是静态定位、相对定位、绝对定位、固定定位。

      定位的基本思想，允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。

      三种基本的定位机制：普通流、浮动和绝对定位。
      除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

      块级框
      div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。
      从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
      但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。

      行内框
      span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
      在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

      定位值（可正可负）：
              bottom   设置定位元素下外边距边界与其包含块下边界之间的偏移。
              top          设置定位元素上外边距边界与其包含块上边界之间的偏移。
              left          设置定位元素左外边距边界与其包含块左边界之间的偏移。
              right       设置定位元素右外边距边界与其包含块右边界之间的偏移。
              center

      设置元素的堆叠顺序（z-index）:

      只有定位了的元素，才能有z-index值。即，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。

      如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁能压住别人。定位了的元素，永远能够压住没有定位的元素。

      从父现象：若父亲的z-index值小，儿子再牛逼也没用。

      背景定位

      CSS 精灵

      “css精灵”，英语css sprite，所以也叫做“css雪碧”技术。是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

      css精灵有什么优点，就是减少了http请求。比如4张小图片，原本需要4个http请求。但是用了css精灵，小图片变为了一张图，http请求只有1个了。

      相对定位

      特点：不脱标，老家留坑，形影分离。

                  元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占空间仍保留。

      作用：微调元素；子绝父相（做绝对定位的参考）。

                  就是微调元素位置的。让元素相对自己原来的位置，进行位置调整。

      相对定位参考点：

                  以定位前的盒子为参考。


      也就是说，如果一个盒子想进行位置调整，那么就要使用相对定位

      1     position:relative;   → 必须先声明，自己要相对定位了，
      2     left:100px;          → 然后进行调整。
      3     top:150px;           → 然后进行调整。

      相对定位不脱标，真实位置是在老家，只不过影子出去了，可以到处飘。



      绝对定位

      特点： 脱标
      元素框从标准流中完全删除，所占空间关闭，不再遵守标准流的性质，margin:0 auto;失效。盒子居中（left:50%; margin-left:负的宽度的一半）
      绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
      元素绝对定位后，不论原来它在正常流中生成何种类型的框，定位后都生成一个块级框，不再区分所谓的行内元素、块级元素，不需要display:block;就可以设置宽、高。

      绝对定位参考点：
      1）元素没有已定位的祖先元素
           如果用      top描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角。
           如果用bottom描述，那么就是浏览器首屏窗口尺寸，对应的页面的左下角。
      2）元素存在已定位的祖先元素
           如果父辈元素中存在已定位的元素，那么将以最近的父辈元素，为参考点。无视参考盒子的padding，以其border内侧为参考点，进行定位。

      以盒子为参考点


      子绝父绝、子绝父相、子绝父固，都可以给儿子定位。但是，工程上子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。工程上，“子绝父相”有意义，父亲没有脱标，儿子脱标在父亲的范围里面移动。

      固定定位

      特点：脱标，IE6不兼容。

      固定定位参考点：
      元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗（浏览器窗口）本身，而不是页面。页面如何滚动，这个盒子显示的位置不变。

      web 字体

      开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。
      支持程度比较好，甚至IE低版本浏览器也能支持。

      4.1 字体格式
      不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。
      1、TureTpe(.ttf)格式
      .ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
      2、OpenType(.otf)格式
      .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
      3、Web Open Font Format(.woff)格式
      woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
      4、Embedded Open Type(.eot)格式
      .eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；
      5、SVG(.svg)格式
      .svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
      关于字体介绍摘自http://www.w3cplus.com/content/css3-font-face/
      了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体，通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间的区别差异。
      推荐http://www.zhaozi.cn/、http://www.youziku.com/ 查找更多中文字体
      4.2 字体图标
      其实我们可以把文字理解成是一种特殊形状的图片，反之我们是不是也可以把图片制作成字体呢？
      答案是肯定的。
      常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体库，然后就可以像使用文字一样使用图标了。
      优点：
      1、将所有图标打包成字体库，减少请求；
      2、具有矢量性，可保证清晰度；
      3、使用灵活，便于维护；
      Font Awesome 使用介绍
      http://fontawesome.dashgame.com/
      定制自已的字体图标库
      http://iconfont.cn/
      https://icomoon.io/


      CSS 兼容性

      通过http://caniuse.com/ 可查询CSS3各特性的支持程度，一般兼容性处理的常见方法是为属性添加私有前缀，如不能解决，应避免使用，无需刻意去处理CSS3的兼容性问题。

      CSS 属性

      如何使用手册
      学会使用工具，可以让我们事半功倍。
      []  表示全部可选项
      ||  表示或者
      |   表示多选一
      ?  表示0个或者1个
      *  表示0个或者多个
      {} 表示范围

      定位 Positioning


      布局 Layout


      尺寸 Dimension


      外补白 Margin


      内补白 Padding


      边框 Border






      背景 Background


      颜色 Color

      字体 Font


      文本 Text



      文本装饰 Text Decoration


      书写模式 Writing Modes

      列表 List


      表格 Table


      内容 Content


      用户界面 User Interface




      多列 Multi-column



      伸缩盒 Flexible Box(旧)


      伸缩盒 Flexible Box(新)



      转换 Transform


      过渡 Transition


      动画 Animation


      打印 Printing


      媒体查询 Media Queries



      Only IE



      Only Firefox


      Only Webkit

      布局

      属性版本继承性描述
      displayCSS2/3无设置或检索对象是否及如何显示
      floatCSS1无该属性的值指出了对象是否及如何浮动。请参阅clear属性
      clearCSS1无该属性的值指出了不允许有浮动对象的边。请参阅float属性
      visibilityCSS2有设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间
      overflowCSS2/3无复合属性。检索或设置对象处理溢出内容的方式。
      overflow-xCSS2/3无检索或设置对象处理横向溢出内容的方式。
      overflow-yCSS2/3无检索或设置对象处理纵向溢出内容的方式。

      table 1.1 heading
      titletitle
      display

      语法：

      display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex

      默认值：inline

      适用于：所有元素

      继承性：无

      动画性：否

      计算值：指定值，除浮动，绝对定位和根元素外

      媒体：视觉

      取值：

      none：
      隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
      inline：
      指定对象为内联元素。
      block：
      指定对象为块元素。
      list-item：
      指定对象为列表项目。
      inline-block：
      指定对象为内联块元素。（CSS2）
      table：
      指定对象作为块元素级的表格。类同于html标签<table>（CSS2）
      inline-table：
      指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）
      table-caption：
      指定对象作为表格标题。类同于html标签<caption>（CSS2）
      table-cell：
      指定对象作为表格单元格。类同于html标签<td>（CSS2）
      table-row：
      指定对象作为表格行。类同于html标签<tr>（CSS2）
      table-row-group：
      指定对象作为表格行组。类同于html标签<tbody>（CSS2）
      table-column：
      指定对象作为表格列。类同于html标签<col>（CSS2）
      table-column-group：
      指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）
      table-header-group：
      指定对象作为表格标题组。类同于html标签<thead>（CSS2）
      table-footer-group：
      指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
      run-in：
      根据上下文决定对象是内联对象还是块级对象。（CSS3）
      box：
      将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
      inline-box：
      将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
      flexbox：
      将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
      inline-flexbox：
      将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
      flex：
      将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
      inline-flex：
      将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

      * CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

      说明：

      设置或检索对象是否及如何显示。
      • 如果display设置为none，float及position属性定义将不生效；
      • 如果position既不是static也不是relative或者float不是none或者元素是根元素，当display:inline-table时，display的计算值为table；当display:inline | inline-block | run-in | table-* 系时，display的计算值为block，其它情况为指定值；

      • IE6,7支持inline元素转换成inline-block，但不支持block元素转换成inline-block，所以非inline元素在IE6,7下要转换成inline-block，需先转换成inline，然后触发hasLayout，以此来获得和inline-block类似的效果；你可以这样：

        全兼容的inline-block：

        div { display: inline-block; *display: inline; *zoom: 1; }
      • 对应的脚本特性为display。
      float

      语法：

      float：none | left | right

      默认值：none

      适用于：所有元素

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      none：
      设置对象不浮动
      left：
      设置对象浮在左边
      right：
      设置对象浮在右边

      说明：

      该属性的值指出了对象是否及如何浮动。请参阅clear属性
      • 如果float不是none，当display:inline-table时，display的计算值为table；当display:inline | inline-block | run-in | table-* 系时，display的计算值为block，其它情况为指定值；
      • float在绝对定位和display为none时不生效。
      • 对应的脚本特性为styleFloat（IE）或cssFloat（非IE）。(注意这里为styleFloat或cssFloat，而不是float)
      clear

      语法：

      clear：none | left | right | both

      默认值：none

      适用于：块级元素

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      none：
      允许两边都可以有浮动对象
      both：
      不允许有浮动对象
      left：
      不允许左边有浮动对象
      right：
      不允许右边有浮动对象

      说明：

      该属性的值指出了不允许有浮动对象的边。请参阅float属性
      • 对应的脚本特性为clear。
      visibility

      语法：

      visibility：visible | hidden | collapse

      默认值：visible

      适用于：所有元素

      继承性：有

      动画性：是

      计算值：指定值

      取值：

      visible：
      设置对象可视
      hidden：
      设置对象隐藏
      collapse：
      主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。

      说明：

      设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间
      • 如果希望对象为可视，其父对象也必须是可视的。
      • 对应的脚本特性为visibility。
      overflow

      语法：

      overflow：<overflow-style>

      <overflow-style> = visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments

      默认值：visible

      适用于：块容器，伸缩盒容器，grid容器

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      visible：
      对溢出内容不做处理，内容可能会超出容器。
      hidden：
      隐藏溢出容器的内容且不出现滚动条。
      scroll：
      隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
      auto：
      当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。
      paged-x：
      TODO...（CSS3）
      paged-y：
      TODO...（CSS3）
      paged-x-controls：
      TODO...（CSS3）
      paged-y-controls：
      TODO...（CSS3）
      fragments：
      TODO...（CSS3）

      * CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

      说明：

      复合属性。检索或设置对象处理溢出内容的方式。参阅overflow-x、overflow-y属性
      • overflow的效果等同于overflow-x + overflow-y。
      • 对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格。
      • 对应的脚本特性为overflow。
      overflow-x

      语法：

      overflow-x：<overflow-style>

      <overflow-style> = visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments

      默认值：visible

      适用于：块容器，伸缩盒容器，grid容器

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      visible：
      对溢出内容不做处理，内容可能会超出容器。
      hidden：
      隐藏溢出容器的内容且不出现滚动条。
      scroll：
      隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
      auto：
      当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。
      paged-x：
      TODO...（CSS3）
      paged-y：
      TODO...（CSS3）
      paged-x-controls：
      TODO...（CSS3）
      paged-y-controls：
      TODO...（CSS3）
      fragments：
      TODO...（CSS3）

      * CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

      说明：

      检索或设置对象处理横向溢出内容的方式。参阅overflow、overflow-y属性
      • 对应的脚本特性为overflowX。
      overflow-y

      检索或设置对象处理纵向溢出内容的方式。


      table 1.1 heading
      属性值描述
      visibility

      语法：

      visibility：visible | hidden | collapse

      默认值：visible

      适用于：所有元素

      继承性：有

      动画性：是

      计算值：指定值

      取值：

      visible：
      设置对象可视
      hidden：
      设置对象隐藏
      collapse：
      主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。

      说明：

      设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间
      • 如果希望对象为可视，其父对象也必须是可视的。
      • 对应的脚本特性为visibility。



      动画

      动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
      动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。
      用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
      0% 是动画的开始，100% 是动画的完成。
      为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

      @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
      当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
      通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
          规定动画的名称
          规定动画的时长
      必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。

      如：
      @keyframes mymove
      {
      0%   {background: red; left:0px; top:0px;}
      25%  {background: yellow;}
      50%  {background: blue;left:200px; top:0px;}
      100% {background: green;}
      }
      object.style.animationName="mymove" //JavaScript 语法
      属性版本继承性描述
      animationCSS3无复合属性。检索或设置对象所应用的动画特效
      animation-nameCSS3无检索或设置对象所应用的动画名称
      animation-durationCSS3无检索或设置对象动画的持续时间
      animation-timing-functionCSS3无检索或设置对象动画的过渡类型
      animation-delayCSS3无检索或设置对象动画延迟的时间
      animation-iteration-countCSS3无检索或设置对象动画的循环次数
      animation-directionCSS3无检索或设置对象动画在循环中是否反向运动
      animation-play-stateCSS3无检索或设置对象动画的状态
      animation-fill-modeCSS3无检索或设置对象动画时间之外的状态


      table 1.1 heading
      属性描述
      animation

      语法：

      animation：<single-animation>[,<single-animation>]*

      <single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

      默认值：看每个独立属性

      适用于：所有元素，包含伪对象:after和:before

      继承性：无

      动画性：否

      计算值：看每个独立属性

      媒体：视觉

      取值：

      <' animation-name '>：
      检索或设置对象所应用的动画名称
      <' animation-duration '>：
      检索或设置对象动画的持续时间
      <' animation-timing-function '>：
      检索或设置对象动画的过渡类型
      <' animation-delay '>：
      检索或设置对象动画延迟的时间
      <' animation-iteration-count '>：
      检索或设置对象动画的循环次数
      <' animation-direction '>：
      检索或设置对象动画在循环中是否反向运动
      <' animation-fill-mode '>：
      检索或设置对象动画时间之外的状态
      <' animation-play-state '>：
      检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

      说明：

      复合属性。检索或设置对象所应用的动画特效。
      • 如果提供多组属性值，以逗号进行分隔。
      • 注意：如果只提供一个<time>参数，则为 <' animation-duration '> 的值定义；如果提供二个<time>参数，则第一个为 <' animation-duration '> 的值定义，第二个为 <' animation-delay '> 的值定义
      • 对应的脚本特性为animation。
      animation-name

      语法：

      animation-name：<single-animation-name>[,<single-animation-name>]*

      <single-animation-name> = none | <identifier>

      默认值：none

      适用于：所有元素，包含伪对象:after和:before

      继承性：无

      动画性：否

      计算值：指定值

      媒体：视觉

      相关属性：[ @keyframes ]

      取值：

      none：
      不引用任何动画名称
      <identifier>：
      定义一个或多个动画名称(identifier标识)

      说明：

      检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
      • 如果提供多个属性值，以逗号进行分隔。
      • 对应的脚本特性为animationName。
      animation-duration

      语法：

      animation-duration：<time>[,<time>]*

      默认值：0s

      适用于：所有元素，包含伪对象:after和:before

      继承性：无

      动画性：否

      计算值：指定值

      媒体：视觉

      取值：

      <time>：
      指定对象动画的持续时间

      说明：

      检索或设置对象动画的持续时间
      • 如果提供多个属性值，以逗号进行分隔。
      • 对应的脚本特性为animationDuration。
      animation-timing-function

      语法：

      animation-timing-function：<single-animation-timing-function>[,<single-animation-timing-function>]*

      <single-animation-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)

      默认值：ease

      适用于：所有元素，包含伪对象:after和:before

      继承性：无

      动画性：否

      计算值：指定值

      媒体：视觉

      取值：

      linear：
      线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
      ease：
      平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
      ease-in：
      由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
      ease-out：
      由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
      ease-in-out：
      由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
      step-start：
      等同于 steps(1, start)
      step-end：
      等同于 steps(1, end)
      steps(<integer>[, [ start | end ] ]?)：
      接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
      cubic-bezier(<number>, <number>, <number>, <number>)：
      特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

      说明：

      检索或设置对象动画的过渡类型
      • 如果提供多个属性值，以逗号进行分隔。
      • 对应的脚本特性为animationTimingFunction。
      animation-delay

      语法：

      animation-delay：<time>[,<time>]*

      默认值：0s

      适用于：所有元素，包含伪对象:after和:before

      继承性：无

      动画性：否

      计算值：指定值

      媒体：视觉

      取值：

      <time>：
      指定对象动画延迟的时间

      说明：

      检索或设置对象动画的延迟时间
      • 如果提供多个属性值，以逗号进行分隔。
      • 对应的脚本特性为animationDelay。
      animation-iteration-count

      语法：

      animation-iteration-count：<single-animation-iteration-count>[,<single-animation-iteration-count>]*

      <single-animation-iteration-count> = infinite | <number>

      默认值：1

      适用于：所有元素，包含伪对象:after和:before

      继承性：无

      动画性：否

      计算值：指定值

      媒体：视觉

      取值：

      infinite：
      无限循环
      <number>：
      指定对象动画的具体循环次数

      说明：

      检索或设置对象动画的循环次数
      • 如果提供多个属性值，以逗号进行分隔。
      • 对应的脚本特性为animationIterationCount。
      animation-direction

      语法：

      animation-direction：<single-animation-direction>[,<single-animation-direction>]*

      <single-animation-direction> = normal | reverse | alternate | alternate-reverse

      默认值：normal

      适用于：所有元素，包含伪对象:after和:before

      继承性：无

      动画性：否

      计算值：指定值

      媒体：视觉

      取值：

      normal：
      正常方向
      reverse：
      反方向运行
      alternate：
      动画先正常运行再反方向运行，并持续交替运行
      alternate-reverse：
      动画先反运行再正方向运行，并持续交替运行

      说明：

      检索或设置对象动画在循环中是否反向运动
      • 如果提供多个属性值，以逗号进行分隔。
      • 对应的脚本特性为animationDirection。
      animation-play-state

      语法：

      animation-play-state：<single-animation-play-state>[,<single-animation-play-state>]*

      <single-animation-play-state> = running | paused

      默认值：running

      适用于：所有元素，包含伪对象:after和:before

      继承性：无

      动画性：否

      计算值：指定值

      媒体：视觉

      取值：

      running：
      运动
      paused：
      暂停

      说明：

      检索或设置对象动画的状态
      • 如果提供多个属性值，以逗号进行分隔。
      • 对应的脚本特性为animationPlayState。
      animation-fill-mode

      语法：

      animation-fill-mode：<single-animation-fill-mode>[,<single-animation-fill-mode>]*

      <single-animation-fill-mode> = none | forwards | backwards | both

      默认值：none

      适用于：所有元素，包含伪对象:after和:before

      继承性：无

      动画性：否

      计算值：指定值

      媒体：视觉

      取值：

      none：
      默认值。不设置对象动画之外的状态
      forwards：
      设置对象状态为动画结束时的状态
      backwards：
      设置对象状态为动画开始时的状态
      both：
      设置对象状态为动画结束或开始的状态

      说明：

      检索或设置对象动画时间之外的状态
      • 如果提供多个属性值，以逗号进行分隔。
      • 对应的脚本特性为animationFillMode。

      背景

      背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
      cover 会使“最大”边，进行缩放，另一边同比缩放，铺满容器，超出部分会溢出。
      contain 会使“最小”边，进行缩放，另一边同比缩放，不一定铺满容器，会完整显示图片。
      background-size会以background-clip设定的盒模型计算
      背景图片尺寸在实际开发中应用十分广泛。
      属性版本继承性描述
      backgroundCSS1/3无复合属性。设置或检索对象的背景特性
      background-colorCSS1无设置或检索对象的背景颜色
      background-imageCSS1/3无设置或检索对象的背景图像
      background-repeatCSS1/3无设置或检索对象的背景图像如何铺排填充
      background-attachmentCSS1/3无设置或检索对象的背景图像是随对象内容滚动还是固定的
      background-positionCSS1/3无设置或检索对象的背景图像位置
      background-originCSS3无设置或检索对象的背景图像显示的原点
      background-clipCSS3无检索或设置对象的背景向外裁剪的区域
      background-sizeCSS3无检索或设置对象的背景图像的尺寸大小


      table 1.1 heading
      属性描述
      background

      语法：

      background：[ <bg-layer>, ]* <final-bg-layer>

      <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? ||
      <repeat-style> || <attachment> || <box> || <box>

      <final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]?
      || <repeat-style> || <attachment> || <box> || <box> ||
      <' background-color '>

      默认值：看每个独立属性

      适用于：所有元素

      继承性：无

      动画性：看每个独立属性

      计算值：看每个独立属性

      取值：

      <' background-image '>：
      指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”
      <' background-position '>：
      指定对象的背景图像位置。
      <' background-size '>：
      指定对象的背景图像的尺寸大小。
      <' background-repeat '>：
      指定对象的背景图像如何铺排填充。
      <' background-attachment '>：
      指定对象的背景图像是随对象内容滚动还是固定的。
      <' background-origin '>：
      指定对象的背景图像显示的原点。
      <' background-clip '>：
      指定对象的背景图像向外裁剪的区域。
      <' background-color '>：
      指定对象的背景颜色。

      说明：

      复合属性。检索或设置对象的背景特性（背景色 <' background-color '> 不能设置多组）。
      • 一个元素可以设置多重背景图像。
      • 每组属性间使用逗号分隔。
      • 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
      • 示例：假设要在同一个元素上定义3个背景图像

        缩写方式：

        background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px
 content-box padding-box,
       url(test1.jpg) no-repeat scroll 10px 20px/70px 90px 
content-box padding-box,
       url(test1.jpg) no-repeat scroll 10px 20px/110px 130px
 content-box padding-box #aaa;

        注意， <' background-color '> 只能设置一次，且由于写在前面的背景会叠在之后
        背景之上，所以背景色通常都定义在最后一组上，避免背景色将图像盖住。

        拆分方式：

        background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);
background-repeat:no-repeat,no-repeat,no-repeat;
background-attachment:scroll,scroll,scroll;
background-position:10px 20px,10px 20px,10px 20px;
background-size:50px 60px,70px 90px,110px 130px;
background-origin:content-box,content-box,content-box;
background-clip:padding-box,padding-box,padding-box;
background-color:#aaa;

      • 如果定义了多个背景图片，而其他属性只有一个参数值，则表明所有背景图片的该属性都应用同一个参数值。据此可以对上面的例子进行缩写：

        缩写方式：

        background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:10px 20px;
background-size:50px 60px,70px 90px,110px 130px;
background-origin:content-box;
background-clip:padding-box;
background-color:#aaa;

        如果定义了多个背景图片，而 <' background-origin '> 和 <' background-clip '> 设置了相同的值。可这样缩写：

        缩写方式：

        background:url(test1.jpg) no-repeat scroll 10px 20px/50px
 60px padding-box,
       url(test1.jpg) no-repeat scroll 10px 20px/70px 
90px padding-box,
       url(test1.jpg) no-repeat scroll 10px 20px/110px 
130px padding-box #aaa;

        这表示 <' background-origin '> 和 <' background-clip '> 都使用了
        -box参数值。

      background-color

      语法：

      background-color：<color>

      默认值：transparent

      适用于：所有元素

      继承性：无

      动画性：是

      计算值：指定值

      取值：

      <color>：
      指定颜色。

      说明：

      设置或检索对象的背景颜色。
      • 当同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上。
      • 如果设置了 <' background-image '>，同时也建议设置 <' background-color '> 用于当背景图像不可见时保持与文本颜色有一定的对比度。
      • 对应的脚本特性为backgroundColor。
      background-image

      语法：

      background-image：<bg-image> [ , <bg-image> ]*

      <bg-image> = <image> | none

      默认值：none

      适用于：所有元素

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      none：
      无背景图。
      <image>：
      使用绝对或相对地址指或者创建渐变色来确定图像。

      说明：

      设置或检索对象的背景图像。
      • 如果设置了 <' background-image '>，同时也建议设置 <' background-color '> 用于当背景图像不可见时保持与文本颜色有一定的对比度。
      • 如果定义了多组背景图，且背景图之间有重叠，写在前面的将会盖在写在后面的图像之上。
      • 对应的脚本特性为backgroundImage。
      background-repeat

      语法：

      background-repeat：<repeat-style> [ , <repeat-style> ]*

      <repeat-style> = repeat-x | repeat-y | [repeat | no-repeat | space | 
      round]{1,2}

      默认值：repeat

      适用于：所有元素

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      repeat-x：
      背景图像在横向上平铺
      repeat-y：
      背景图像在纵向上平铺
      repeat：
      背景图像在横向和纵向平铺
      no-repeat：
      背景图像不平铺
      round：
      背景图像自动缩放直到适应且填充满整个容器。（CSS3）
      space：
      背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）

      说明：

      设置或检索对象的背景图像如何铺排填充。必须先指定 <' background-image '> 属性。
      • 允许提供2个参数，如果提供全部2个参数，第1个用于横向，第二个用于纵向。
      • 如果只提供1个参数，则用于横向和纵向。特殊值repeat-x和repeat-y除外，因为repeat-x相当于repeat no-repeat，repeat-y相当于no-repeat repeat，即其实repeat-x和repeat-y等价于提供了2个参数值
      • 对应的脚本特性为backgroundRepeat。
      background-attachment

      语法：

      background-attachment：<attachment> [ , <attachment> ]*

      <attachment> = fixed | scroll | local

      默认值：scroll

      适用于：所有元素

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      fixed：
      背景图像相对于窗体固定。
      scroll：
      背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
      local：
      背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）

      说明：

      设置或检索背景图像是随对象内容滚动还是固定的。必须先指定
      <' background-image '> 属性。
      • 对应的脚本特性为backgroundAttachment。
      background-position

      语法：

      background-position：<position> [ , <position> ]*

      <position> = [ left | center | right | top | bottom | <percentage> | 
      <length> ] | [ left | center | right | <percentage> | <length> ] [ top |
      center | bottom | <percentage> | <length> ] | [ center | [ left | right ]
      [ <percentage> | <length> ]? ] && [ center | [ top | bottom ]
      [ <percentage> | <length> ]? ]

      默认值：0% 0%，效果等同于left top

      适用于：所有元素

      继承性：无

      动画性：是

      计算值：指定值

      取值：

      <percentage>：
      用百分比指定背景图像填充的位置。可以为负值。
      <length>：
      用长度值指定背景图像填充的位置。可以为负值。
      center：
      背景图像横向和纵向居中。
      left：
      背景图像在横向上填充从左边开始。
      right：
      背景图像在横向上填充从右边开始。
      top：
      背景图像在纵向上填充从顶部开始。
      bottom：
      背景图像在纵向上填充从底部开始。

      说明：

      设置或检索对象的背景图像位置。必须先指定 <' background-image '> 属性。
      • 该属性提供2个参数值（CSS3中已允许提供4个值）。
      • 如果提供四个，每个<percentage>或<length>偏移前都必须跟着一个关键字
        （即left | center | right | top | bottom），偏移量相对关键字位置进行偏移。
      • 示例：假设要定义背景图像在容器中右下方，并且距离右边和底部各有20px

        缩写方式：

        background:url(test1.jpg) no-repeat right 20px bottom 20px;
        你也可以设置3个参数值：

        拆分方式：

        background:url(test1.jpg) no-repeat left bottom 10px;

        要注意的是：设置3个或4个值，偏移量前必须有关键字。也就是说，形如：
        "10px bottom 20px" ，这样的参数设置是错误的，因为10px前面没有关键字。

      • 如果提供两个，第一个用于横坐标，第二个用于纵坐标。
      • 如果只提供一个，该值将用于横坐标；纵坐标将默认为50%（即center）。
      • 对应的脚本特性为backgroundPosition。
      background-origin

      语法：

      background-origin：<box> [ , <box> ]*

      <box> = border-box | padding-box | content-box

      默认值：padding-box

      适用于：所有元素

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      padding-box：
      从padding区域（含padding）开始显示背景图像。
      border-box：
      从border区域（含border）开始显示背景图像。
      content-box：
      从content区域开始显示背景图像。

      说明：

      设置或检索对象的背景图像计算 <' background-position '> 时的参考原点(位置)。
      • 对应的脚本特性为backgroundOrigin。
      background-clip

      语法：

      background-clip：<box> [ , <box> ]*

      <box> = border-box | padding-box | content-box | text

      默认值：border-box

      适用于：所有元素

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      padding-box：
      从padding区域（不含padding）开始向外裁剪背景。
      border-box：
      从border区域（不含border）开始向外裁剪背景。
      content-box：
      从content区域开始向外裁剪背景。
      text：
      从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。遮罩效果 See with Webkit

      说明：

      指定对象的背景图像向外裁剪的区域。
      • 对应的脚本特性为backgroundClip。
      background-size

      语法：

      background-size：<bg-size> [ , <bg-size> ]*

      <bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

      默认值：auto

      适用于：所有元素

      继承性：无

      动画性：是，除非使用值为关键字

      计算值：指定值

      取值：

      <length>：
      用长度值指定背景图像大小。不允许负值。
      <percentage>：
      用百分比指定背景图像大小。不允许负值。
      auto：
      背景图像的真实大小。
      cover：
      将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
      contain：
      将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

      说明：

      检索或设置对象的背景图像的尺寸大小。
      • 该属性提供2个参数值(特性值cover和contain除外)。
      • 如果提供两个，第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度。
      • 如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩放。
      • 对应的脚本特性为backgroundSize。


      边框

      元素的边框 (border) 
      是围绕在元素内容和内边距的一条或多条线。
      CSS border 属性规定元素边框的样式、宽度和颜色。
      CSS2 指出背景只延伸到内边距，而不是边框。后来 CSS2.1 进行了更正：元素的背景是内容、内边距和边框区的背景。
      样式是边框最重要的一个方面，因为如果没有样式，将根本没有边框。

      边框圆角 -- 圆角处理时，脑中要形成圆、圆心、长半径、短半径的概念，正圆是椭圆的一种特殊情况。
      表格运用圆角需要 border-collapse: separate;
      当圆角半径小于或等于边框宽度时，元素内角是直角
      属性版本继承性描述
      borderCSS1无复合属性。设置对象边框的特性
      border-widthCSS1无设置或检索对象边框宽度
      border-styleCSS1无设置或检索对象边框样式
      border-colorCSS1无设置或检索对象边框颜色
      border-topCSS1无复合属性。设置对象顶边的特性
      border-top-widthCSS1无设置或检索对象顶边宽度
      border-top-styleCSS1无设置或检索对象顶边样式
      border-top-colorCSS1无设置或检索对象顶边颜色
      border-rightCSS1无复合属性。设置对象右边的特性
      border-right-widthCSS1无设置或检索对象右边宽度
      border-right-styleCSS1无设置或检索对象右边样式
      border-right-colorCSS1无设置或检索对象右边颜色
      border-bottomCSS1无复合属性。设置对象底边的特性
      border-bottom-widthCSS1无设置或检索对象底边宽度
      border-bottom-styleCSS1无设置或检索对象底边样式
      border-bottom-colorCSS1无设置或检索对象底边颜色
      border-leftCSS1无复合属性。置对象左边的特性
      border-left-widthCSS1无设置或检索对象左边宽度
      border-left-styleCSS1无设置或检索对象左边样式
      border-left-colorCSS1无设置或检索对象左边颜色
      border-radiusCSS3无设置或检索对象使用圆角边框
      border-top-left-radiusCSS3无设置或检索对象左上角圆角边框
      border-top-right-radiusCSS3无设置或检索对象右上角圆角边框
      border-bottom-right-radiusCSS3无设置或检索对象右下角圆角边框
      border-bottom-left-radiusCSS3无设置或检索对象左下角圆角边框
      box-shadowCSS3无设置或检索对象阴影
      border-imageCSS3无设置或检索对象的边框样式使用图像来填充
      border-image-sourceCSS3无设置或检索对象的边框是否用图像定义样式或图像来源路径
      border-image-sliceCSS3无设置或检索对象的边框背景图的分割方式
      border-image-widthCSS3无设置或检索对象的边框厚度
      border-image-outsetCSS3无设置或检索对象的边框背景图的扩展
      border-image-repeatCSS3无设置或检索对象的边框图像的平铺方式


      table 1.1 heading
      属性描述
      border

      语法：

      border：<line-width> || <line-style> || <color>

      <line-width> = <length> | thin | medium | thick

      <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

      默认值：看每个独立属性

      适用于：所有元素

      继承性：无

      动画性：看每个独立属性

      计算值：看每个独立属性

      相关属性：[ border-top ] || [ border-right ] || [ border-bottom ] || [ border-left ]

      取值：

      <line-width>：
      设置或检索对象边框宽度。
      <line-style>：
      设置或检索对象边框样式。
      <color>：
      设置或检索对象边框颜色。

      说明：

      复合属性。设置对象边框的特性。参阅outline属性。
      • 如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
      • 对应的脚本特性为border。
      border-width

      语法：

      border-width：<line-width>{1,4}

      <line-width> = <length> | thin | medium | thick

      默认值：看每个独立属性

      适用于：所有元素

      继承性：无

      动画性：是

      计算值：看每个独立属性

      相关属性：[ border-top-width ] || [ border-right-width ] || [ border-bottom-width ] || [ border-left-width ]

      取值：

      <length>：
      用长度值来定义边框的厚度。不允许负值
      medium：
      定义默认厚度的边框。计算值为3px
      thin：
      定义比默认厚度细的边框。计算值为1px
      thick：
      定义比默认厚度粗的边框。计算值为5px

      说明：

      设置或检索对象的边框宽度。
      • 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
      • 如果只提供一个，将用于全部的四边。
      • 如果提供两个，第一个用于上、下，第二个用于左、右。
      • 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
      • 如果border-style设置为none或hidden，border-width的使用值将为0。
      • 对应的脚本特性为borderWidth。
      border-style

      语法：

      border-style：<line-style>{1,4}

      <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

      默认值：看每个独立属性

      适用于：所有元素

      继承性：无

      动画性：否

      计算值：看每个独立属性

      相关属性：[ border-top-style ] || [ border-right-style ] || [ border-bottom-style ] || [ border-left-style ]

      取值：

      none：
      无轮廓。border-color将被忽略，border-width计算值为0，除非边框轮廓为图像，即border-image。
      hidden：
      隐藏边框。IE7及以下尚不支持
      dotted：
      点状轮廓。IE6下显示为dashed效果
      dashed：
      虚线轮廓。
      solid：
      实线轮廓
      double：
      双线轮廓。两条单线与其间隔的和等于指定的border-width值
      groove：
      3D凹槽轮廓。
      ridge：
      3D凸槽轮廓。
      inset：
      3D凹边轮廓。
      outset：
      3D凸边轮廓。

      说明：

      设置或检索对象的边框样式。
      • 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
      • 如果只提供一个，将用于全部的四边。
      • 如果提供两个，第一个用于上、下，第二个用于左、右。
      • 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
      • 如果border-width等于0，本属性将失去作用。
      • 对应的脚本特性为borderStyle。
      border-color

      语法：

      border-color：<color>{1,4}

      默认值：看每个独立属性

      适用于：所有元素

      继承性：无

      动画性：是

      计算值：看每个独立属性

      相关属性：[ border-top-color ] || [ border-right-color ] || [ border-bottom-color ] || [ border-left-color ]

      取值：

      <color>：
      指定颜色。

      说明：

      设置或检索对象的边框颜色。参阅border-colors属性。
      • 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
      • 如果只提供一个，将用于全部的四边。
      • 如果提供两个，第一个用于上、下，第二个用于左、右。
      • 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
      • 如果border-width等于0或border-style设置为none，本属性将被忽略。
      • 对应的脚本特性为borderColor。
      border-top
      border-top-width
      border-top-style
      border-top-color
      border-right
      border-right-width

      border-right-style

      border-right-color

      border-bottom
      border-bottom-width

      border-bottom-style

      border-bottom-color

      border-left

      border-left-width

      border-left-style
      border-left-color

      border-radius

      语法：

      border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

      默认值：看每个独立属性

      适用于：所有元素

      继承性：无

      动画性：看每个独立属性

      计算值：看每个独立属性

      取值：

      <length>：
      用长度值设置对象的圆角半径长度。不允许负值
      <percentage>：
      用百分比设置对象的圆角半径长度。不允许负值

      说明：

      设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
      • 水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
      • 如果只提供一个，将用于全部的于四个角。
      • 如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
      • 如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。
      • 垂直半径也遵循以上4点。
      • 对应的脚本特性为borderRadius。
      border-top-left-radius
      border-top-right-radius

      border-bottom-left-radius

      border-bottom-right-radius

      box-shadow

      语法：

      box-shadow：none | <shadow> [ , <shadow> ]*

      <shadow> = inset? && <length>{2,4} && <color>?

      默认值：none

      适用于：所有元素

      继承性：无

      动画性：是，除了内、外阴影切换时

      计算值：指定值

      取值：

      none：
      无阴影
      <length>①：
      第1个长度值用来设置对象的阴影水平偏移值。可以为负值
      <length>②：
      第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
      <length>③：
      如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
      <length>④：
      如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
      <color>：
      设置对象的阴影的颜色。
      inset：
      设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

      说明：

      设置或检索对象阴影。参阅 <' text-shadow '> 属性
      • 可以设定多组效果，每组参数值以逗号分隔。
      • 对应的脚本特性为boxShadow。
      border-image

      语法：

      border-image：<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>

      默认值：看每个独立属性

      适用于：看每个独立属性

      继承性：无

      动画性：看每个独立属性

      计算值：看每个独立属性

      取值：
      <' border-image-source '>：
      设置或检索对象的边框是否用图像定义样式或图像来源路径。
      <' border-image-slice '>：
      设置或检索对象的边框背景图的分割方式。
      <' border-image-width '>：
      设置或检索对象的边框厚度。
      <' border-image-outset '>：
      设置或检索对象的边框背景图的扩展。
      <' border-image-repeat '>：
      设置或检索对象的边框图像的平铺方式。

      说明：

      复合属性。设置或检索对象的边框样式使用图像来填充。
      • 使用图像替代 <' border-style '> 去定义边框样式。当 <' border-image '> 为none或图像不可见时，将会显示 <' border-style '> 所定义的边框样式效果。
      border-image-source

      语法：

      border-image-source：none | <image>

      默认值：none

      适用于：所有元素，除table元素设置了 <' border-collapse '> 为collapse之外

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      none：
      无背景图片。
      <image>：
      使用绝对或相对地址指或者创建渐变色来确定图像。
      说明：
      设置或检索对象的边框样式使用图像路径。
      • 指定一个图像用来替代 <' border-style '> 边框样式的属性。当 <' border-image '> 为none或图像不可见时，将会显示 <' border-style '> 所定义的边框样式效果。
      • 对应的脚本特性为borderImageSource。
      border-image-slice

      语法：

      border-image-slice：[ <number> | <percentage> ]{1,4} && fill?

      默认值：100%

      适用于：所有元素，除table元素设置了 <' border-collapse '> 为collapse之外

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      <number>：
      用浮点数指定宽度。不允许负值。
      <percentage>：
      用百分比指定宽度。参照其包含块区域进行计算。不允许负值。
      fill：
      保留裁减后的中间区域，其铺排方式遵循 <' border-image-repeat '> 的设定。

      说明：

      设置或检索对象的边框背景图的分割方式。
      • 该属性指定从上，右，下，左方位来分隔图像，将图像分成4个角，4条边和中间区域共9份，中间区域始终是透明的（即没图像填充），除非加上关键字 fill。
      • 对应的脚本特性为borderImageSlice。
      border-image-width

      语法：

      border-image-slice：[ <number> | <percentage> ]{1,4} && fill?

      默认值：100%

      适用于：所有元素，除table元素设置了 <' border-collapse '> 为collapse之外

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      <number>：
      用浮点数指定宽度。不允许负值。
      <percentage>：
      用百分比指定宽度。参照其包含块区域进行计算。不允许负值。
      fill：
      保留裁减后的中间区域，其铺排方式遵循 <' border-image-repeat '> 的设定。

      说明：

      设置或检索对象的边框背景图的分割方式。
      • 该属性指定从上，右，下，左方位来分隔图像，将图像分成4个角，4条边和中间区域共9份，中间区域始终是透明的（即没图像填充），除非加上关键字 fill。
      • 对应的脚本特性为borderImageSlice。
      border-image-outset

      语法：

      border-image-outset：[ <length> | <number> ]{1,4}

      默认值：0

      适用于：所有元素，除table元素设置了 <' border-collapse '> 为collapse之外

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      <length>：
      用长度值指定宽度。不允许负值。
      <number>：
      用浮点数指定宽度。不允许负值。

      说明：

      置或检索对象的边框背景图的扩展。
      • 该属性用于指定边框图像向外扩展所定义的数值，即如果值为10px，则图像在原本的基础上往外延展10px再显示。
      • 对应的脚本特性为borderImageOutset。
      border-image-repeat

      语法：

      border-image-repeat：[ stretch | repeat | round | space ]{1,2}

      默认值：stretch

      适用于：所有元素，除table元素设置了 <' border-collapse '> 为collapse之外

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      stretch：
      指定用拉伸方式来填充边框背景图。
      repeat：
      指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
      round：
      指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
      space：
      指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。

      说明：

      设置或检索对象的边框图像的平铺方式。
      • 该属性用于指定边框背景图的填充方式。可定义0-2个参数值，即水平和垂直方向。如果2个值相同，可合并成1个，表示水平和垂直方向都用相同的方式填充边框背景图；如果2个值都为stretch，则可省略不写。
      • 对应的脚本特性为borderImageRepeat。

      轮廓

      值复制：
      值采用 top-right-bottom-left 的顺序；
      在上、右、下、左侧。如果忽略第四个值，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。

      元素的轮廓（outline）
      是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
      CSS outline 属性规定元素轮廓的样式、颜色和宽度。
      属性 值 描述
      outline 在一个声明中设置所有的轮廓属性。

      object.style.outline="#0000FF dotted thin"

      轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
      注释：轮廓线不会占据空间，也不一定是矩形。

      可以按顺序设置如下属性：
      outline-color
      outline-style
      outline-width

      none 清除所有轮廓样式。

      默认值： invert none medium
      outline-color 设置轮廓的颜色。
      outline-style 设置轮廓的样式。
      样式不能是 none，否则轮廓不会出现。
      outline-width 设置轮廓的宽度。

      颜色

      属性版本继承性描述
      colorCSS1有指定颜色。请参阅颜色值
      opacityCSS3无检索或设置对象的不透明度


      属性 值 描述
      color color_name |
      hex_number|
      rgb_number|
      rgba | C3
      hsl | C3 
      hsla | C3
      transparent |
      inherit      		规定文本的前景颜色。

      语法：

      color：<color>

      默认值：由user agent决定

      适用于：所有元素

      继承性：有

      动画性：是

      计算值：指定值

      取值：

      <color>：
      指定颜色。

      说明：

      检索或设置对象的文本颜色。无默认值
      • 可以使用Color Name(颜色名称), HEX, RGB, RGBA, HSL, HSLA, transparent来指定color。
      • 注意，用颜色名称指定color可能不被一些浏览器接受。

      • color属性值被间接用来提供一个中间值 currentColor 以供其他接受颜色值的属性使用。

        示例：

        div { border: 10px solid; color: red; }

        如上代码，没有定义边框的颜色，但定义了color的颜色为red，那么这时red将会作为一个间接值 currentColor 提供给边框颜色属性，所以最终边框色也为red。

      • 对应的脚本特性为color。

      color_name 规定颜色值为颜色名称的颜色（比如 red）。
      hex_number 规定颜色值为十六进制值的颜色（比如 #ff0000）。
      rgb_number 规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。

      Red、Green、Blue、Alpha即RGBA
      rgba 的前三个参数为对应的RGB值（R、G、B 取值范围0~255），最后一个参数为透明度通道（0.0 到 1.0）

      Hue、Saturation、Lightness、Alpha即HSLA
      H 取值范围0~360，0/360表示黑色、120表示绿色、240表示蓝色
      S 取值范围0%~100%
      L 取值范围0%~100%
      A 取值范围0~1

      transparent ，完全透明
      inherit 规定应该从父元素继承颜色。
      background-color 同上规定文本或元素的背景颜色。
      不能继承
      color-profile 允许使用源的颜色配置文件的默认以外的规范。
      opacityvalue |
      inherit;

      默认值：1
      		 opacity 属性设置元素的不透明级别。
      可继承

      value 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
      inherit 应该从父元素继承 opacity 属性的值。
      默认值：1
      rendering-intent 允许使用颜色配置文件渲染意图的默认以外的规范。

      Content for Paged Media 

      属性 值 描述
      bookmark-label 规定书签的标记。
      bookmark-level 规定书签的级别。
      bookmark-target 规定书签链接的目标。
      float-offset 将元素放在 float 属性通常放置的位置的相反方向。
      hyphenate-after 规定连字单词中连字符之后的最小字符数。
      hyphenate-before 规定连字单词中连字符之前的最小字符数。
      hyphenate-character 规定当发生断字时显示的字符串。
      hyphenate-lines 指示元素中连续断字连线的最大数。
      hyphenate-resource 规定帮助浏览器确定断字点的外部资源（逗号分隔的列表）。
      hyphens 设置如何对单词进行拆分，以改善段落的布局。
      image-resolution 规定图像的正确分辨率。
      marks 向文档添加裁切标记或十字标记。
      string-set

      尺寸

      属性版本继承性描述
      widthCSS1无检索或设置对象的宽度
      min-widthCSS2无设置或检索对象的最小宽度
      max-widthCSS2无设置或检索对象的最大宽度
      heightCSS1无检索或设置对象的高度
      min-heightCSS2无设置或检索对象的最小高度
      max-heightCSS2无设置或检索对象的最大高度

      宽度和真实占有宽度，不是一个概念！！

      CSS中width指的是内容的宽度，而不是盒子的宽度。

      CSS中height指的是内容的高度，而不是盒子的高度。

      真实占有宽度=  左border  +  左padding  +  width  +  右padding  +  右border
      真实占有高度=  上border  +  上padding  +  height +  下padding  +  下border

      table 1.1 heading
      属性描述
      width

      语法：

      width：<length> | <percentage> | auto

      默认值：auto

      适用于：除非置换内联元素，table-row, table-row-group之外的所有元素

      继承性：无

      动画性：当值为<length> | <percentage>时

      计算值：指定的值

      取值：

      auto：
      无特定宽度值，取决于其它属性值
      <length>：
      用长度值来定义宽度。不允许负值
      <percentage>：
      用百分比来定义宽度。百分比参照包含块宽度。不允许负值

      说明：

      检索或设置对象的宽度。
      • 对于img对象来说，仅指定此属性，其height值将根据图片源尺寸等比例缩放。
      • 对于盒模型规则，请参阅box-sizing属性。
      • 对应的脚本特性为width。
      min-width

      语法：

      min-width：<length> | <percentage>

      默认值：0

      适用于：除非置换内联元素，table-row, table-row-group之外的所有元素

      继承性：无

      动画性：当值为<length> | <percentage>时

      计算值：指定的值

      取值：

      <length>：
      用长度值来定义最小宽度。不允许负值
      <percentage>：
      用百分比来定义最小宽度。不允许负值

      说明：

      设置或检索对象的最小宽度。
      • 如果min-width属性的值大于max-width属性的值，max-width将会自动以min-width的值作为自己的值。
      • IE6尚不支持此属性
      • 对应的脚本特性为minWidth。
      max-width

      语法：

      max-width：<length> | <percentage> | none

      默认值：none

      适用于：除非置换内联元素，table-row, table-row-group之外的所有元素

      继承性：无

      动画性：当值为<length> | <percentage>时

      计算值：指定的值

      取值：

      none：
      无最大宽度限制
      <length>：
      用长度值来定义最大宽度。不允许负值
      <percentage>：
      用百分比来定义最大宽度。不允许负值

      说明：

      设置或检索对象的最大宽度。
      • 如果max-width属性的值小于min-width属性的值，max-width将会自动以min-width的值作为自己的值。
      • IE6尚不支持此属性
      • 对应的脚本特性为maxWidth。
      height

      语法：

      height：<length> | <percentage> | auto

      默认值：auto

      适用于：除非置换内联元素，table-column, table-column-group之外的所有元素

      继承性：无

      动画性：当值为<length> | <percentage>时

      计算值：指定的值

      取值：

      auto：
      无特定高度值，取决于其它属性值
      <length>：
      用长度值来定义高度。不允许负值
      <percentage>：
      用百分比来定义高度。不允许负值

      说明：

      检索或设置对象的高度。
      • 对于img对象来说，仅指定此属性，其width值将根据图片源尺寸等比例缩放。
      • 对于盒模型规则，请参阅box-sizing属性。
      • 对应的脚本特性为height。
      min-height

      语法：

      min-height：<length> | <percentage>

      默认值：0

      适用于：除非置换内联元素，table-row, table-row-group之外的所有元素

      继承性：无

      动画性：当值为<length> | <percentage>时

      计算值：指定的值

      取值：

      <length>：
      用长度值来定义最小高度。不允许负值
      <percentage>：
      用百分比来定义最小高度。不允许负值

      说明：

      检索或设置对象的最小高度。
      • 如果min-height属性的值大于max-height属性的值，max-height将会自动以min-height的值作为自己的值。
      • IE6尚不支持此属性。IE6的变通实现方法请参考 最小高度min-height实现详解。
      • 对应的脚本特性为minHeight。
      max-height

      语法：

      max-height：<length> | <percentage> | none

      默认值：none

      适用于：除非置换内联元素，table-row, table-row-group之外的所有元素

      继承性：无

      动画性：当值为<length> | <percentage>时

      计算值：指定的值

      取值：

      none：
      无最小高度限制
      <length>：
      用长度值来定义最大高度。不允许负值
      <percentage>：
      用百分比来定义最大高度。不允许负值

      说明：

      检索或设置对象的最大高度。
      • 如果max-height属性的值小于min-height属性的值，max-height将会自动以min-height的值作为自己的值。
      • IE6尚不支持此属性
      • 对应的脚本特性为maxHeight。


      可伸缩框

      CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用，使得开发人员一下子就过上了小康的生活。
      伸缩盒模型经历了几次演变，大致分为旧版伸缩布局、过渡伸缩布局、新版伸缩布局，同样为了避免混淆，我们以学习新版伸缩布局为主。

      新
      版伸缩布局
      这里我们需要引入一些新的概念：
      主轴：Flex容器的主轴主要用来配置Flex项目。
      侧轴：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。
      主轴和侧轴并不是固定不变的，通过flex-direction可以调整。

      1、指定一个盒子为伸缩盒子 display: flex
      2、设置属性来调整此盒的子元素的布局方式 例如 flex-direction
      3、明确主侧轴的方向
      4、可互换主侧轴，也可改变方向
      其相关属性可参照源代码里的解释如flex-direction、flex-wrap、flex-flow、align-items、align-content、justify-content、align-self、flex、order等
      另个两个版本伸缩布局其实现思路与新版基本一致，区别在于其属性及属性值不同，熟练掌握新版伸缩布局后，要参照对比另外两个版本的不同。

      新版伸缩盒布局
      属性版本继承性描述
      flexCSS3无复合属性。设置或检索伸缩盒对象的子元素如何分配空间。
      flex-growCSS3无设置或检索弹性盒的扩展比率。
      flex-shrinkCSS3无设置或检索弹性盒的收缩比率
      flex-basisCSS3无设置或检索弹性盒伸缩基准值。
      flex-flowCSS3无复合属性。设置或检索伸缩盒对象的子元素排列方式。
      flex-directionCSS3无设置或检索伸缩盒对象的子元素在父容器中的位置。
      flex-wrapCSS3无设置或检索伸缩盒对象的子元素超出父容器时是否换行。
      align-contentCSS3无设置或检索弹性盒堆叠伸缩行的对齐方式。
      align-itemsCSS3无设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
      align-selfCSS3无设置或检索弹性盒子元素自身在侧轴（纵轴）方向上的对齐方式。
      justify-contentCSS3无设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
      orderCSS3无设置或检索伸缩盒对象的子元素出現的順序。

      table 1.1 heading
      属性值描述
      flex

      语法：

      flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>

      默认值：看各分拆属性

      适用于：flex子项

      继承性：无

      动画性：否

      计算值：看各分拆属性

      取值：

      none：
      none关键字的计算值为: 0 0 auto
      <' flex-grow '>：
      用来指定扩展比率，即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。
      在「flex」属性中该值如果被省略则默认为「1」
      <' flex-shrink '>：
      用来指定收缩比率，即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。
      在收缩的时候收缩比率会以伸缩基准值加权
      在「flex」属性中该值如果被省略则默认为「1」
      <' flex-basis '>：
      用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，「flex子项」长度的起始数值。
      在「flex」属性中该值如果被省略则默认为「0%」
      在「flex」属性中该值如果被指定为「auto」，则伸缩基准值的计算值是自身的 <' width '> 设置，如果自身的宽度没有定义，则长度取决于内容。

      说明：

      复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
      • 如果缩写「flex: 1」, 则其计算值为「1 1 0%」
      • 如果缩写「flex: auto」, 则其计算值为「1 1 auto」
      • 如果「flex: none」, 则其计算值为「0 0 auto」
      • 如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值
      • 示例：如下情况每个元素的计算宽是多少

        Code：

        &lt;ul class="flex"&gt; &lt;li&gt;a&lt;/li&gt; &lt;li&gt;b&lt;/li&gt; &lt;li&gt;c&lt;/li&gt; &lt;/ul&gt; .flex{display:flex;width:800px;margin:0;padding:0;list-style:none;} .flex :nth-child(1){flex:1 1 300px;} .flex :nth-child(2){flex:2 2 200px;} .flex :nth-child(3){flex:3 3 400px;}

        本例定义了父容器宽（即主轴宽）为800px，由于子元素设置了伸缩基准值flex-basis，相加300+200+400=900，那么子元素将会溢出900-800=100px；
        由于同时设置了收缩因子，所以加权综合可得300*1+200*2+400*3=1900px；
        于是我们可以计算a,b,c将被移除的溢出量是多少：
        a被移除溢出量：(300*1/1900)*100，即约等于16px
        b被移除溢出量：(200*2/1900)*100，即约等于21px
        c被移除溢出量：(400*3/1900)*100，即约等于63px
        最后a,b,c的实际宽度分别为：300-16=284px, 200-21=179px, 400-63=337px

      • 仍然是上面这个例子，不过将容器的宽度改成了1500px

        Code：

        &lt;ul class="flex"&gt; &lt;li&gt;a&lt;/li&gt; &lt;li&gt;b&lt;/li&gt; &lt;li&gt;c&lt;/li&gt; &lt;/ul&gt; .flex{display:flex;width:1500px;margin:0;padding:0;list-style:none;} .flex :nth-child(1){flex:1 1 300px;} .flex :nth-child(2){flex:2 2 200px;} .flex :nth-child(3){flex:3 3 400px;}
        本例定义了父容器宽（即主轴宽）为1500px，由于子元素设置了伸缩基准值flex-basis，相加300+200+400=900，那么容器将有1500-900=600px的剩余宽度；
        于是我们可以计算a,b,c将被扩展量是多少：
        a的扩展量：(1/(1+2+3))*600，即约等于100px
        b的扩展量：(2/(1+2+3))*600，即约等于200px
        c的扩展量：(3/(1+2+3))*600，即约等于300px
        最后a,b,c的实际宽度分别为：300+100=400px, 200+200=400px, 400+300=700px
        从本例能看出：

        当「flex-basis」在「flex」属性中不为0时（包括值为auto，此时伸缩基准值等于自身内容宽度），「flex子项」将分配容器的剩余空间（剩余空间即等于容器宽度减去各项的伸缩基准值）

        当「flex-basis」在「flex」属性中等于0时，「flex子项」将分配容器的所有空间（因为各项的伸缩基准值相加等于0，剩余空间等于容器宽度减去各项的伸缩基准值，即减0，最后剩余空间值等于容器宽度），所以可以借助此特性，给各子项定义「flex: n」来进行按比例均分容器总宽度

      • 对应的脚本特性为flex。
      flex-grow

      语法：

      flex-grow：<number>

      默认值：0

      适用于：flex子项

      继承性：无

      动画性：是

      计算值：指定值

      取值：

      <number>：
      用数值来定义扩展比率。不允许负值

      说明：

      设置或检索弹性盒的扩展比率。
      • 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。
      • 示例：b,c将按照1:3的比率分配剩余空间

        Code：

        &lt;ul class="flex"&gt; &lt;li&gt;a&lt;/li&gt; &lt;li&gt;b&lt;/li&gt; &lt;li&gt;c&lt;/li&gt; &lt;/ul&gt; .flex{display:flex;width:600px;margin:0;padding:0;list-style:none;} .flex li:nth-child(1){width:200px;} .flex li:nth-child(2){flex-grow:1;width:50px;} .flex li:nth-child(3){flex-grow:3;width:50px;}

        flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。

        本例中b,c两项都显式的定义了flex-grow，flex容器的剩余空间分成了4份，其中b占1份，c占3分，即1:3

        flex容器的剩余空间长度为：600-200-50-50=300px，所以最终a,b,c的长度分别为：

        a: 50+(300/4)=200px

        b: 50+(300/4*1)=125px

        a: 50+(300/4*3)=275px

      • 对应的脚本特性为flexGrow。
      flex-shrink

      语法：

      flex-shrink：<number>

      默认值：1

      适用于：flex子项

      继承性：无

      动画性：是

      计算值：指定值

      取值：

      <number>：
      用数值来定义收缩比率。不允许负值

      说明：

      设置或检索弹性盒的收缩比率。
      • 根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。
      • 示例：a,b,c将按照1:1:3的比率来收缩空间

        HTML Code：

        &lt;ul class="flex"&gt; &lt;li&gt;a&lt;/li&gt; &lt;li&gt;b&lt;/li&gt; &lt;li&gt;c&lt;/li&gt; &lt;/ul&gt; .flex{display:flex;width:400px;margin:0;padding:0;list-style:none;} .flex li{width:200px;} .flex li:nth-child(3){flex-shrink:3;}

        flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

        本例中c显式的定义了flex-shrink，a,b没有显式定义，但将根据默认值1来计算，可以看到总共将剩余空间分成了5份，其中a占1份，b占1份，c占3分，即1:1:3

        我们可以看到父容器定义为400px，子项被定义为200px，相加之后即为600px，超出父容器200px。那么这么超出的200px需要被a,b,c消化

        通过收缩因子，所以加权综合可得200*1+200*1+200*3=1000px；
        于是我们可以计算a,b,c将被移除的溢出量是多少：
        a被移除溢出量：(200*1/1000)*200，即约等于40px
        b被移除溢出量：(200*1/1000)*200，即约等于40px
        c被移除溢出量：(200*3/1000)*200，即约等于120px
        最后a,b,c的实际宽度分别为：200-40=160px, 200-40=160px, 200-120=80px

      • 对应的脚本特性为flexGrow。
      flex-basis

      语法：

      flex-basis：<length> | <percentage> | auto | content

      默认值：auto

      适用于：flex子项

      继承性：无

      动画性：是，当值为非关键字时

      计算值：指定值

      取值：

      <length>：
      用长度值来定义宽度。不允许负值
      <percentage>：
      用百分比来定义宽度。不允许负值
      auto：
      无特定宽度值，取决于其它属性值
      content：
      基于内容自动计算宽度

      说明：

      设置或检索弹性盒伸缩基准值。
      • 如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间
      • 对应的脚本特性为flexBasis。
      flex-flow

      语法：

      flex-flow：<' flex-direction '> || <' flex-wrap '>

      默认值：看各分拆属性

      适用于：flex容器

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      <' flex-direction '>：
      定义弹性盒子元素的排列方向。
      <' flex-wrap '>：
      控制flex容器是单行或者多行。

      说明：

      复合属性。设置或检索弹性盒模型对象的子元素排列方式。
      • 对应的脚本特性为flexFlow。
      flex-direction

      语法：

      flex-direction：row | row-reverse | column | column-reverse

      默认值：row

      适用于：flex容器

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      row：
      主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
      row-reverse：
      对齐方式与row相反。
      column：
      主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
      column-reverse：
      对齐方式与column相反。

      说明：

      该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。这将决定flex需要如何进行排列
      • 该属性的反转取值不影响元素的绘制，语音和导航顺序，只改变流动方向。这与 <' writing-mode '> 和 <' direction '> 相同。
      • 示例：将一个容器内的子元素反转横向排列

        Code：

        &lt;ul id="flex"&gt; &lt;li&gt;a&lt;/li&gt; &lt;li&gt;b&lt;/li&gt; &lt;li&gt;c&lt;/li&gt; &lt;/ul&gt; #box { display: flex; flex-direction: row-reverse; list-style: none; }

        请自行根据需要补全厂商前缀。flex生效需定义 <' display '> 为flex或inline-flex(box或inline-box，这是旧的方式)

      • 对应的脚本特性为flexDirection。
      flex-wrap

      语法：

      flex-wrap：nowrap | wrap | wrap-reverse

      默认值：nowrap

      适用于：flex容器

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      nowrap：
      flex容器为单行。该情况下flex子项可能会溢出容器
      wrap：
      flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
      wrap-reverse：
      反转 wrap 排列。

      说明：

      该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
      • 对应的脚本特性为flexWrap。
      align-content

      语法：

      align-content：flex-start | flex-end | center | space-between | space-around | stretch

      默认值：stretch

      适用于：多行的弹性盒模型容器

      继承性：无

      动画性：是

      计算值：指定值

      取值：

      flex-start：
      各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。
      flex-end：
      各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。
      center：
      各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）
      space-between：
      各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'flex-start'。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。
      space-around：
      各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。
      stretch：
      各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。

      说明：

      当伸缩容器的侧轴还有多余空间时，本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的 <' justify-content '> 属性类似。请注意本属性在只有一行的伸缩容器上没有效果。
      • 对应的脚本特性为alignContent。
      align-items

      语法：

      align-items：flex-start | flex-end | center | baseline | stretch

      默认值：stretch

      适用于：flex容器

      继承性：无

      动画性：是

      计算值：指定值

      取值：

      flex-start：
      弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
      flex-end：
      弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
      center：
      弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
      baseline：
      如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
      stretch：
      如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

      说明：

      定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
      • 对应的脚本特性为alignItems。
      align-self

      语法：

      align-self：auto | flex-start | flex-end | center | baseline | stretch

      默认值：auto

      适用于：flex子项

      继承性：无

      动画性：是

      计算值：如果值为「auto」，则计算值为父元素的 <' align-items '> 值，否则为指定值。

      取值：

      auto：
      如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
      flex-start：
      弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
      flex-end：
      弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
      center：
      弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
      baseline：
      如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
      stretch：
      如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

      说明：

      定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
      • 对应的脚本特性为alignSelf。
      justify-content

      语法：

      justify-content：flex-start | flex-end | center | space-between | space-around

      默认值：flex-start

      适用于：flex容器

      继承性：无

      动画性：是

      计算值：指定值

      取值：

      flex-start：
      弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
      flex-end：
      弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
      center：
      弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。
      space-between：
      弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
      space-around：
      弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

      说明：

      设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
      • 当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时，这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性同样会在对齐上进行控制。
      • 对应的脚本特性为justifyContent。
      order

      • 语法：

        order：<integer>

        默认值：0

        适用于：flex子项和flex容器中的绝对定位子元素

        继承性：无

        动画性：是

        计算值：指定值

        取值：

        <integer>：
        用整数值来定义排列顺序，数值小的排在前面。可以为负值。

        说明：

        设置或检索弹性盒模型对象的子元素出現的順序。
        • order定义将会影响 <' position '> 值为static元素的层叠级别，数值小的会被数值大的盖住。

          demo：

          .test { display: flex; } .item2 { order: -1; margin: -30px; } &lt;div class="test"&gt; &lt;p class="item1"&gt;flex item1&lt;/p&gt; &lt;p class="item2"&gt;flex item2&lt;/p&gt; &lt;/div&gt;

          此时，item1将会盖在item2之上

        • 对应的脚本特性为order。

      旧版伸缩盒布局
      属性版本继承性描述
      box-orientCSS3无设置或检索伸缩盒对象的子元素的排列方式。
      box-packCSS3无设置或检索伸缩盒对象的子元素的对齐方式。请参阅box-align兄弟属性
      box-alignCSS3无设置或检索伸缩盒对象的子元素的对齐方式。请参阅box-pack兄弟属性
      box-flexCSS3无设置或检索伸缩盒对象的子元素如何分配其剩余空间。
      box-flex-groupCSS3无设置或检索伸缩盒对象的子元素的所属组。
      box-ordinal-groupCSS3无设置或检索伸缩盒对象的子元素的显示顺序。
      box-directionCSS3无设置或检索伸缩盒对象的子元素的排列顺序是否反转。
      box-linesCSS3无设置或检索伸缩盒对象的子元素是否可以换行显示。
      属性 值 描述
      box-alignstart |
      end |
      center |
      baseline |
      stretch;

      默认值： stretch
      		规定如何对齐框的子元素。
      object.style.boxAlign="center"

      start
      对于正常方向的框，每个子元素的下边缘沿着框的底边放置。
      对于反方向的框，每个子元素的下边缘沿着框的底边放置。
      end
      对于正常方向的框，每个子元素的下边缘沿着框的底边放置。
      对于反方向的框，每个子元素的上边缘沿着框的顶边放置。
      center 均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下。
      baseline 如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐。
      stretch 拉伸子元素以填充包含块
      box-directionnormal |
      reverse |
      inherit;

      默认值： normal
      		规定框的子元素的显示方向。
      object.style.boxDirection="reverse"

      normal 以默认方向显示子元素。
      reverse 以反方向显示子元素。
      inherit 应该从子元素继承 box-direction 属性的值
      box-flexbox-flex: value;

      默认值： 0.0（指示该元素不可伸缩）
      		 规定框的子元素是否可伸缩。
      object.style.boxFlex=2.0

      value 元素的可伸缩行。柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。
      box-flex-group 将可伸缩元素分配到柔性分组。
      box-linessingle |
      multiple;

      默认值：single
      		规定当超出父元素框的空间时，是否换行显示。
      object.style.boxLines="multiple"

      single 所有子元素会被放置在单独的行或列中。（无法匹配的元素会被视为溢出）。
      multiple 允许框扩展为多行，以容纳其所有子元素。
      box-ordinal-group 规定框的子元素的显示次序。
      box-orient 规定框的子元素是否应水平或垂直排列。
      box-pack 规定水平框中的水平位置或者垂直框中的垂直位置。

      字体

      属性版本继承性描述
      fontCSS1/2有复合属性。设置或检索对象中的文本特性
      font-styleCSS1有设置或检索对象中的字体样式
      font-variantCSS1有设置或检索对象中的文本是否为小型的大写字母
      font-weightCSS1有设置或检索对象中的文本字体的粗细
      font-sizeCSS1有设置或检索对象中的字体尺寸
      font-familyCSS1有设置或检索用于对象中文本的字体名称序列
      font-stretchCSS3有设置或检索对象中的文字是否横向拉伸变形。
      font-size-adjustCSS3有设置或检索小写字母x的高度与对象文字字号的比率。


      table 1.1 heading
      属性描述
      font

      语法：

      font：[ [ <' font-style '> || <' font-variant '> || <' font-weight '> ]? <' font-size '> [ / <' line-height '> ]? <' font-family '> ] | caption | icon | menu | message-box | small-caption | status-bar

      默认值：看独立属性自身

      适用于：所有元素

      继承性：有

      动画性：看独立属性自身

      计算值：看独立属性自身

      取值：

      <' font-style '>：
      指定文本字体样式
      <' font-variant '>：
      指定文本是否为小型的大写字母
      <' font-weight '>：
      指定文本字体的粗细
      <' font-size '>：
      指定文本字体尺寸
      <' line-height '>：
      指定文本字体的行高
      <' font-family '>：
      指定文本使用某个字体或字体序列
      caption：
      使用有标题的系统控件的文本字体（如按钮，菜单等）（CSS2）
      icon：
      使用图标标签的字体（CSS2）
      menu：
      使用菜单的字体（CSS2）
      message-box：
      使用信息对话框的文本字体（CSS2）
      small-caption：
      使用小控件的字体（CSS2）
      status-bar：
      使用窗口状态栏的字体（CSS2）

      说明：

      设置或检索对象中的文本特性。该属性是复合属性。
      • 使用第一种声明方式参数必须按照如上的排列顺序，且 <' font-size '> 和 <' font-family '> 是不可忽略的。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性的默认值。
      • 对于如何使用客户端系统没有字体和自定义字体，可以参阅@font-face规则。
      • 对应的脚本特性为font。
      font-style

      语法：

      font-style：normal | italic | oblique

      默认值：normal

      适用于：所有元素

      继承性：有

      动画性：否

      计算值：指定值

      取值：

      normal：
      指定文本字体样式为正常的字体
      italic：
      指定文本字体样式为斜体。对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique
      oblique：
      指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字

      说明：

      设置或检索对象中的文本字体样式。
      • 对应的脚本特性为fontStyle。
      font-variant

      语法：

      font-variant：normal | small-caps

      默认值：normal

      适用于：所有元素

      继承性：有

      动画性：否

      计算值：指定值

      取值：

      normal：
      正常的字体
      small-caps：
      小型的大写字母字体

      说明：

      设置或检索对象中的文本是否为小型的大写字母。
      • 对应的脚本特性为fontVariant。
      font-weight

      语法：

      font-weight：normal | bold | bolder | lighter | <integer>

      默认值：normal

      适用于：所有元素

      继承性：有

      动画性：是

      计算值：数字重量值

      取值：

      normal：
      正常的字体。相当于数字值400
      bold：
      粗体。相当于数字值700。
      bolder：
      定义比继承值更重的值
      lighter：
      定义比继承值更轻的值
      <integer>：
      用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

      说明：

      设置或检索对象中的文本字体的粗细。
      • 作用由客户端系统安装的字体的特定字体变量映射决定。系统选择最近的匹配。也就是说，用户可能看不到不同值之间的差异。
      • 对应的脚本特性为fontWeight。
      font-size

      语法：

      font-size：<absolute-size> | <relative-size> | <length> | <percentage>

      <absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large

      <relative-size> = smaller | larger

      默认值：medium

      适用于：所有元素

      继承性：有

      动画性：是

      计算值：指定值

      取值：

      <absolute-size>：
      根据对象字号进行调节。以 medium 作为基础参照，xx-small相当于medium 3/5 (h6)，x-small: 3/4，small: 8/9 (h5)，medium: 1 (h4)，large: 6/5 (h3)，x-large: 3/2 (h2)，xx-large: 2/1 (h1)，
      <relative-size>：
      相对于父对像中字号进行相对调节。使用成比例的em单位计算。
      <length>：
      用长度值指定文字大小。不允许负值。
      <percentage>：
      用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。

      说明：

      设置或检索对象中的字体尺寸。
      • 对应的脚本特性为fontSize。
      font-family

      语法：

      font-family：[ <family-name> | <generic-family> ] #

      <family-name> = arial | georgia | verdana | helvetica | simsun and etc.

      <generic-family> = cursive | fantasy | monospace | serif | sans-serif

      默认值：由user agent决定

      适用于：所有元素

      继承性：有

      动画性：否

      计算值：指定值

      取值：

      <family-name>：
      字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文，则应使用引号括起
      <generic-family>：
      字体序列名称。

      说明：

      设置或检索用于对象中文本的字体名称序列。
      • 序列可包含嵌入字体。请参阅@font-face规则。
      • 一般字体引用可以不加引号，如果字体名包含了空格、数字或者符号（如连接符）则需加上引号，避免引发错误。
      • user agent会遍历定义的字体序列，直到匹配到某个字体为止。
      • 指定字体序列：

        写法：

        body { font-family: helvetica, verdana, sans-serif; }

        如上字体定义，假设你机器上没有helvetica字体，但有verdana，这时将会以verdana显示你的文字。

      • 对应的脚本特性为fontFamily。

      网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装。如果用户电脑里面没有这个字体，那么就会变成宋体。

      页面中，中文我们只使用： 微软雅黑、宋体、黑体。 如果页面中，需要其他的字体，那么需要切图。

      英语：Arial 、 Times New Roman

      所有的中文字体，都有英语别名。

      font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

      在 CSS 中，有两种不同类型的字体系列名称：
      通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）
      Serif 字体，Sans-serif 字体，Monospace 字体，Cursive 字体，Fantasy 字体
      特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）

      建议在所有 font-family 规则中都提供一个通用字体系列。这样就提供了一条后路，在用户代理无法提供与规则匹配的特定字体时，就可以选择一个候选字体。

      可以为给定的元素指定一系列类似的字体。要做到这一点，需要把这些字体按照优先顺序排列，然后用逗号进行连接，用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用，就会简单地选择一种可用的 serif 字体。
      font-stretch

      语法：

      font-stretch：normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

      默认值：normal

      适用于：所有元素

      继承性：有

      动画性：是

      计算值：指定值

      取值：

      normal：
      正常文字宽度
      ultra-condensed：
      比正常文字宽度窄4个基数。
      extra-condensed：
      比正常文字宽度窄3个基数。
      condensed：
      比正常文字宽度窄2个基数。
      semi-condensed：
      比正常文字宽度窄1个基数。
      semi-expanded：
      比正常文字宽度宽1个基数。
      expanded：
      比正常文字宽度宽2个基数。
      extra-expanded：
      比正常文字宽度宽3个基数。
      ultra-expanded：
      比正常文字宽度宽4个基数。

      说明：

      设置或检索对象中的文字是否横向拉伸变形。
      • 文字的拉伸是相对于浏览器显示的字体的正常宽度。
      • 对应的脚本特性为fontStretch。
      font-size-adjust

      语法：

      font-size-adjust：none | <number>

      默认值：none

      适用于：所有元素

      继承性：有

      动画性：当值为 <number> 时

      计算值：指定值

      取值：

      none：
      不保留首选字体的 x-height
      <number>：
      定义字体的 aspect 值。

      说明：

      设置或检索对象的 aspect 值，用以保持首选字体的 x-height。
      • 字体的小写字母 "x" 的高度与字号之间的比率被称为一个字体的 aspect 值
      • 高 aspect 值的字体被设置为很小的尺寸时会更易阅读。举例：Verdana 的 aspect 值是 0.58（意味着当字体尺寸为 100px 时，它的 x-height 是 58px）。Times New Roman 的 aspect 值是 0.46。这就意味着 Verdana 在小尺寸时比 Times New Roman 更易阅读。
      • 可以使用这个公式来为可用字体推演出合适的字号：可应用到可用字体的字体尺寸 = 首选字体的字体尺寸 * （font-size-adjust 值 / 可用字体的 aspect 值）
      • 详述：如果 14px 的 Verdana（aspect 值是 0.58）不可用，但是某个可用的字体的 aspect 值是 0.46，那么替代字体的尺寸将是 14 * (0.58/0.46) = 17.65px。
      • 对应的脚本特性为fontSizeAdjust。

      内容生成

      属性版本继承性描述
      contentCSS2无用来和:after及:before伪元素一起使用，在对象前或后显示内容
      counter-incrementCSS2无设定当一个selector发生时计数器增加的值
      counter-resetCSS2无将指定selector的计数器复位
      quotesCSS2有设置或检索对象内使用的嵌套标记


      table 1.1 heading
      属性描述
      content

      语法：

      content：[ [<uri> | icon] ',' ]* [ normal | none | inhibit | <content-list> ]

      <content-list> = [ pending(<identifier>) | <string> | contents | footnote | endnote | section-note | list-item | <counter> | <named-string> | open-quote | close-quote | no-open-quote | no-close-quote | icon | <glyph> | <uri> | <datetime> | document-url | <target> ]+

      <counter> = counter(name) | counter(name,list-style-type) | counters(name,string) | counters(name,string,list-style-type)

      默认值：normal

      适用于：所有元素，::before, ::after, ::alternate, ::marker, ::line-marker, margin areas, @footnote areas

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      normal：
      默认值。表现与none值相同
      none：
      不生成任何值。
      <attr>：
      插入标签属性值
      <url>：
      使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）
      <string>：
      插入字符串
      counter(name)：
      使用已命名的计数器
      counter(name,list-style-type)：
      使用已命名的计数器并遵从指定的list-style-type属性
      counters(name,string)：
      使用所有已命名的计数器
      counters(name,string,list-style-type)：
      使用所有已命名的计数器并遵从指定的list-style-type属性
      no-close-quote：
      并不插入quotes属性的后标记。但增加其嵌套级别
      no-open-quote：
      并不插入quotes属性的前标记。但减少其嵌套级别
      close-quote：
      插入quotes属性的后标记
      open-quote：
      插入quotes属性的前标记

      说明：

      用来和:after及:before伪元素一起使用，在对象前或后显示内容。
      • 对应的脚本特性为content。
      counter-incrrement

      语法：

      counter-increment：none | [<identifier> <integer>]+

      默认值：none

      适用于：所有元素，::before, ::after, ::alternate, ::marker, ::line-marker, margin areas, @footnote areas, and @page context

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      none：
      阻止计数器增加
      <identifier>：
      identifier定义一个或多个将被增加的selector，id，或者class
      <integer>：
      定义计算器每次增加的数值，可以为负值，默认值是1

      说明：

      设定当一个selector发生时计数器增加的值。
      • 对应的脚本特性为counterIncrement。
      counter-reset

      语法：

      counter-reset：none | [<identifier> <integer>]+

      默认值：none

      适用于：所有元素，::before, ::after, ::alternate, ::marker, ::line-marker, margin areas, @footnote areas, and @page context

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      none：
      阻止计数器复位
      <identifier>：
      identifier定义一个或多个将被复位的selector，id，或者class
      <integer>：
      定义被复位的数值，可以为负值，默认值是0

      说明：

      将指定selector的计数器复位。
      • 对应的脚本特性为counterReset。
      quotes

      语法：

      quotes：none | [<string> <string>]+

      默认值：none

      适用于：所有元素，::before, ::after, ::alternate, ::marker, ::line-marker, margin areas, @footnote areas, and @page context

      继承性：有

      动画性：否

      计算值：指定值

      取值：

      none：
      content属性的open-quote和close-quote值将不会生成任何标记
      <string>：
      定义content属性的open-quote和close-quote值的标记，2个为一组

      说明：

      设置或检索对象内使用的嵌套标记。
      • 对应的脚本特性为quotes。

      Grid

      属性 值 描述
      grid-columns 规定网格中每个列的宽度。
      grid-rows 规定网格中每个列的高度。

      列表

      CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。
      属性版本继承性描述
      list-styleCSS1有复合属性。设置列表项目相关内容
      list-style-imageCSS1有设置或检索作为对象的列表项标记的图像
      list-style-positionCSS1有设置或检索作为对象的列表项标记如何根据文本排列
      list-style-typeCSS1/2有设置或检索对象的列表项所使用的预设标记

      table 1.1 heading
      属性描述
      list-style

      语法：

      list-style：<' list-style-type '> || <' list-style-position '> || <' list-style-image '>

      默认值：看独立属性自身

      适用于：所有 <' display '> 设置为list-item的元素

      继承性：有

      动画性：否

      计算值：看独立属性自身

      取值：

      <' list-style-type '>：
      设置或检索对象的列表项所使用的预设标记
      <' list-style-position '>：
      设置或检索作为对象的列表项标记如何根据文本排列
      <' list-style-image '>：
      设置或检索作为对象的列表项标记的图像

      说明：

      复合属性。设置列表项目相关内容
      • 需要注意的是，如果使用 <' list-style '> 复合属性，<' list-style-image '> 属性必须放在最后，否则部分浏览器（包括所有的webkit/blink内核浏览器）将会解析出错。
      • 对应的脚本特性为listStyle。
      list-style-image

      语法：

      list-style-image：none | <url>

      默认值：none

      适用于：所有 <' display '> 设置为list-item的元素

      继承性：有

      动画性：否

      计算值：图像计算值或none

      取值：

      none：
      不指定图像，默认内容标记将被 <' list-style-type '> 代替。
      <url>：
      使用绝对或相对地址指定列表项标记图像。如果图像地址无效，默认内容标记将被 <' list-style-type '> 代替。

      说明：

      设置或检索作为对象的列表项标记的图像。
      • 若 <' list-style-image '> 属性为none或指定图像不可用时，<' list-style-type '> 属性将发生作用。
      • 对应的脚本特性为listStyleImage。
      list-style-position

      语法：

      list-style-position：outside | inside

      默认值：outside

      适用于：所有 <' display '> 设置为list-item的元素

      继承性：有

      动画性：否

      计算值：特定值

      取值：

      outside：
      列表项目标记放置在文本以外，且环绕文本不根据标记对齐
      inside：
      列表项目标记放置在文本以内，且环绕文本根据标记对齐

      说明：

      设置或检索作为对象的列表项标记如何根据文本排列。
      • 仅作用于具有 <' display '> 值等于list-item的对象（如li对象）。
      • 注意：ol对象和ul对象的type特性为其后的所有列表项目（如li对象）指明列表属性。
      • 对应的脚本特性为listStylePosition。
      list-style-type

      语法：

      list-style-type：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

      默认值：disc

      适用于：所有 <' display '> 设置为list-item的元素

      继承性：有

      动画性：否

      计算值：特定值

      取值：

      disc：
      实心圆(CSS1)
      circle：
      空心圆(CSS1)
      square：
      实心方块(CSS1)
      decimal：
      阿拉伯数字(CSS1)
      lower-roman：
      小写罗马数字(CSS1)
      upper-roman：
      大写罗马数字(CSS1)
      lower-alpha：
      小写英文字母(CSS1)
      upper-alpha：
      大写英文字母(CSS1)
      none：
      不使用项目符号(CSS1)
      armenian：
      传统的亚美尼亚数字(CSS2)
      cjk-ideographic：
      浅白的表意数字(CSS2)
      georgian：
      传统的乔治数字(CSS2)
      lower-greek：
      基本的希腊小写字母(CSS2)
      hebrew：
      传统的希伯莱数字(CSS2)
      hiragana：
      日文平假名字符(CSS2)
      hiragana-iroha：
      日文平假名序号(CSS2)
      katakana：
      日文片假名字符(CSS2)
      katakana-iroha：
      日文片假名序号(CSS2)
      lower-latin：
      小写拉丁字母(CSS2)
      upper-latin：
      大写拉丁字母(CSS2)

      说明：

      设置或检索对象的列表项所使用的预设标记。
      • 若 <' list-style-image '> 属性为none或指定图像不可用时， <'list-style-type '> 属性将发生作用。
      • 仅作用于具有 <'display '> 值等于list-item的对象（如li对象）。
      • 注意：ol对象和ul对象的type特性为其后的所有列表项目（如li对象）指明列表属性。
      • 对应的脚本特性为listStyleType。


      外边距

      值复制。
      如果缺少左外边距的值，则使用右外边距的值。
      如果缺少下外边距的值，则使用上外边距的值。
      如果缺少右外边距的值，则使用上外边距的值。

      margin的塌陷现象

      标准文档流中，竖直方向的margin不叠加，以较大的为准。

      属性版本继承性描述
      marginCSS1无检索或设置对象四边的外延边距
      margin-topCSS1无检索或设置对象顶边的外延边距
      margin-rightCSS1无检索或设置对象右边的外延边距
      margin-bottomCSS1无检索或设置对象底边的外延边距
      margin-leftCSS1无检索或设置对象左边的外延边距
      table 1.1 heading
      属性描述
      margin

      语法：

      margin：[ <length> | <percentage> | auto ]{1,4}

      默认值：看每个独立属性

      适用于：所有元素，除非 table | inline-table | table-caption 的表格类元素之外

      继承性：无

      动画性：是

      计算值：看每个独立属性

      相关属性：[ margin-top ] || [ margin-right ] || [ margin-bottom ] || [ margin-left ]

      取值：

      auto：
      水平（默认）书写模式下，margin-top/margin-bottom计算值为0，margin-left/margin-right取决于可用空间。详见：margin系列之keyword auto
      <length>：
      用长度值来定义外补白。可以为负值
      <percentage>：
      用百分比来定义外补白。水平（默认）书写模式下，参照其包含块 width 进行计算，其它情况参照 height ，可以为负值

      说明：

      检索或设置对象四边的外延边距。
      • 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
      • 如果只提供一个，将用于全部的四边。
      • 如果提供两个，第一个用于上、下，第二个用于左、右。
      • 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
      • 非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的外补丁；若要设置上、下两边的外补丁，必须先使该对象表现为块级或内联块级。
      • 外延边距始终透明。
      • 某些相邻的margin会发生合并，我们称之为margin折叠。

      • margin折叠常规认知：
        • margin折叠只发生在块级元素上；
        • 浮动元素的margin不与任何margin发生折叠；
        • 设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折叠；
        • 绝对定位元素的margin不与任何margin发生折叠；
        • 根元素的margin不与其它任何margin发生折叠；
      • 对应的脚本特性为margin。
      margin-top

      语法：

      margin-top：<length> | <percentage> | auto

      默认值：0

      适用于：所有元素，除非 table | inline-table | table-caption 的表格类元素和非替代行内元素之外

      继承性：无

      动画性：是

      计算值：指定的百分比、绝对长度或auto

      相关属性：[ margin ] || [ margin-right ] || [ margin-bottom ] || [ margin-left ]

      取值：

      auto：
      水平（默认）书写模式下，其计算值为0
      <length>：
      用长度值来定义外补白。可以为负值
      <percentage>：
      用百分比来定义外补白。水平（默认）书写模式下，参照其包含块 width 进行计算，其它情况参照 height ，可以为负值

      说明：

      检索或设置对象顶边的外延边距。
      • 替代(Replaced)行内元素可以应用该属性。
      • 非替代(non-Replaced)行内元素要使用该属性必须先使该对象表现为块级或行内块级。
      • 外延边距始终透明。
      • 对应的脚本特性为marginTop。
      margin-right
      margin-bottom
      margin-left

      Marquee

      属性 值 描述
      marquee-direction 设置移动内容的方向。
      marquee-play-count 设置内容移动多少次。
      marquee-speed 设置内容滚动得多快。
      marquee-style 设置移动内容的样式。

      多列

      属性版本继承性描述
      columnsCSS3无设置或检索对象的列数和每列的宽度。复合属性
      column-widthCSS3无设置或检索对象每列的宽度
      column-countCSS3无设置或检索对象的列数
      column-gapCSS3无设置或检索对象的列与列之间的间隙
      column-ruleCSS3无设置或检索对象的列与列之间的边框。复合属性
      column-rule-widthCSS3无设置或检索对象的列与列之间的边框厚度。
      column-rule-styleCSS3无设置或检索对象的列与列之间的边框样式。
      column-rule-colorCSS3无设置或检索对象的列与列之间的边框颜色。
      column-spanCSS3无设置或检索对象元素是否横跨所有列。
      column-fillCSS3无设置或检索对象所有列的高度是否统一。
      column-break-beforeCSS3无设置或检索对象之前是否断行。
      column-break-afterCSS3无设置或检索对象之前是否断行。
      column-break-insideCSS3无设置或检索对象内部是否断行。



      属性 值 描述
      column-count
      		 规定元素应该被分隔的列数。

      number 元素内容将被划分的最佳列数。
      auto 由其他属性决定列数，比如 "column-width"。

      语法：

      column-count：<integer> | auto

      默认值：auto

      适用于：除table外的非替换块级元素, table cells, inline-block元素

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      <integer>：
      用整数值来定义列数。不允许负值
      auto：
      根据 <' column-width '> 自定分配宽度

      说明：

      设置或检索对象的列数
      • 对应的脚本特性为columnCount。
      column-fill
      		 规定如何填充列。

      balance 对列进行协调。浏览器应对列长度的差异进行最小化处理。
      auto 按顺序对列进行填充，列长度会各有不同。

      语法：

      column-fill：auto | balance

      默认值：auto

      适用于：定义了多列的元素

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      auto：
      列高度自适应内容
      balance：
      所有列的高度以其中最高的一列统一

      说明：

      设置或检索对象所有列的高度是否统一。
      • 对应的脚本特性为columnFill。
      column-gap
      		 规定列之间的间隔。

      语法：

      column-gap：<length> | normal

      默认值：normal

      适用于：定义了多列的元素

      继承性：无

      动画性：否

      计算值：绝对长度值或者normal

      取值：

      <length>：
      用长度值来定义列与列之间的间隙。不允许负值
      normal：
      与 <' font-size '> 大小相同。假设该对象的font-size为16px，则normal值为16px，类推。

      说明：

      设置或检索对象的列与列之间的间隙
      • 对应的脚本特性为columnGap。
      column-rule
      		 设置所有 column-rule-* 属性的简写属性。

      column-rule：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '>

      默认值：看每个独立属性

      适用于：定义了多列的元素

      继承性：无

      动画性：否

      计算值：看每个独立属性

      取值：

      <' column-rule-width '>：
      设置或检索对象的列与列之间的边框厚度。
      <' column-rule-style '>：
      设置或检索对象的列与列之间的边框样式。
      <' column-rule-color '>：
      设置或检索对象的列与列之间的边框颜色。

      说明：

      设置或检索对象的列与列之间的边框。复合属性。参阅 <' border '> 属性
      • 对应的脚本特性为columnRule。
      column-rule-color
      		 规定列之间规则的颜色。

      语法：

      column-rule-color：<color>

      默认值：采用文本颜色

      适用于：定义了多列的元素

      继承性：无

      动画性：否

      计算值：与 <' color '> 属性一致

      取值：

      <color>：
      指定颜色。

      说明：

      设置或检索对象的列与列之间的边框颜色。参阅 <' border-color '> 属性
      column-rule-style
      		 规定列之间规则的样式。

      语法：

      column-rule-style：none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

      默认值：none

      适用于：定义了多列的元素

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      none：
      无轮廓。<' column-rule-color '> 与<' column-rule-width '> 将被忽略
      hidden：
      隐藏边框。
      dotted：
      点状轮廓。
      dashed：
      虚线轮廓。
      solid：
      实线轮廓
      double：
      双线轮廓。两条单线与其间隔的和等于指定的 <' column-rule-width '> 值
      groove：
      3D凹槽轮廓。
      ridge：
      3D凸槽轮廓。
      inset：
      3D凹边轮廓。
      outset：
      3D凸边轮廓。

      说明：

      设置或检索对象的列与列之间的边框样式。参阅 <' border-style '> 属性
      • 如果 <' column-rule-width '> 等于0，本属性将失去作用。
      • 对应的脚本特性为columnRuleStyle。
      column-rule-width
      		 规定列之间规则的宽度。

      column-rule-width：<length> | thin | medium | thick

      默认值：medium

      适用于：定义了多列的元素

      继承性：无

      动画性：否

      计算值：绝对长度值或者0（如果 <' column-rule-style '> 为 none 或者 hidden）

      取值：

      <length>：
      用长度值来定义边框的厚度。不允许负值
      medium：
      定义默认厚度的边框。
      thin：
      定义比默认厚度细的边框。
      thick：
      定义比默认厚度粗的边框。

      说明：

      设置或检索对象的列与列之间的边框厚度。参阅 <' border-width '> 属性
      • 如果 <' column-rule-style '> 设置为none或者hidden，本属性将失去作用。
      • 对应的脚本特性为columnRuleWidth。
      column-span
      		 规定元素应该横跨的列数。

      语法：

      column-span：none | all

      默认值：none

      适用于：除浮动和绝对定位之外的块级元素

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      none：
      不跨列
      all：
      横跨所有列

      说明：

      设置或检索对象元素是否横跨所有列。
      • 对应的脚本特性为columnSpan。
      column-width
      		 规定列的宽度。

      取值：

      <length>：
      用长度值来定义列宽。不允许负值
      auto：
      根据 <' column-count '> 自定分配宽度

      说明：

      设置或检索对象每列的宽度
      • 对应的脚本特性为columnWidth。
      columns
      		 规定设置 column-width 和 column-count 的简写属性。

      取值：

      <' column-width '>：
      设置或检索对象每列的宽度
      <' column-count '>：
      设置或检索对象的列数

      说明：

      设置或检索对象的列数和每列的宽度。复合属性
      • 对应的脚本特性为columns。
      column-break-before

      语法：

      column-break-before：auto | always | avoid | left | right | page | column | avoid-page | avoid-column

      默认值：auto

      适用于：块级元素

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      auto：
      既不强迫也不禁止在元素之前断行并产生新列
      always：
      总是在元素之前断行并产生新列
      avoid：
      避免在元素之前断行并产生新列

      说明：

      设置或检索对象之前是否断行。
      • 对应的脚本特性为columnBreakBefore。
      column-break-after

      语法：

      column-break-after：auto | always | avoid | left | right | page | column | avoid-page | avoid-column

      默认值：auto

      适用于：块级元素

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      auto：
      既不强迫也不禁止在元素之后断行并产生新列
      always：
      总是在元素之后断行并产生新列
      avoid：
      避免在元素之后断行并产生新列

      说明：

      设置或检索对象之后是否断行。
      • 对应的脚本特性为columnBreakAfter。
      column-break-inside

      语法：

      column-break-inside：auto | avoid | avoid-page | avoid-column

      默认值：auto

      适用于：块级元素

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      auto：
      既不强迫也不禁止在元素内部断行并产生新列
      avoid：
      避免在元素内部断行并产生新列

      说明：

      设置或检索对象内部是否断行。
      • 对应的脚本特性为columnBreakInside。

      内边距

      属性版本继承性简介
      paddingCSS1无检索或设置对象四边的内部边距
      padding-topCSS1无检索或设置对象顶边的内部边距
      padding-rightCSS1无检索或设置对象右边的内部边距
      padding-bottomCSS1无检索或设置对象底边的内部边距
      padding-leftCSS1无检索或设置对象左边的内部边距


      table 1.1 heading
      属性描述
      padding

      语法：

      padding：[ <length> | <percentage> ]{1,4}

      默认值：看每个独立属性

      适用于：所有元素，除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row 外

      继承性：无

      动画性：是

      计算值：看每个独立属性

      相关属性：[ padding-top ] || [ padding-right ] || [ padding-bottom ] || [ padding-left ]

      取值：

      <length>：
      用长度值来定义内补白。不允许负值
      <percentage>：
      用百分比来定义内补白。水平（默认）书写模式下，参照其包含块 width 进行计算，其它情况参照 height 。不允许负值

      说明：

      检索或设置对象四边的内部边距。
      • 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
      • 如果只提供一个，将用于全部的四边。
      • 如果提供两个，第一个用于上、下，第二个用于左、右。
      • 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
      • 非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的内补丁；若要设置上、下两边的内补丁，必须先使该对象表现为块级或内联块级。
      • 对应的脚本特性为padding。
      padding-top

      语法：

      padding-top：<length> | <percentage>

      默认值：0

      适用于：所有元素，除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row 外

      继承性：无

      动画性：是

      计算值：<length>

      相关属性：[ padding ] || [ padding-right ] || [ padding-bottom ] || [ padding-left ]

      取值：

      <length>：
      用长度值来定义内补白。不允许负值
      <percentage>：
      用百分比来定义内补白。水平（默认）书写模式下，参照其包含块 width 进行计算，其它情况参照 height 。不允许负值

      说明：

      检索或设置对象顶边的内补白。
      • 非替代(non-Replaced)行内元素要使用该属性必须先使该对象表现为块级或内联块级。
      • 对应的脚本特性为paddingTop。
      padding-right
      padding-bottom
      padding-left

      Paged Media

      属性 值 描述
      fit 示意如何对width和height属性均不是auto的被替换元素进行缩放。
      fit-position 定义盒内对象的对齐方式。
      image-orientation 规定用户代理应用于图像的顺时针方向旋转。
      page 规定元素应该被显示的页面特定类型。
      size 规定页面内容包含框的尺寸和方向。

      定位

      一切皆为框

      定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。
      属性版本继承性描述
      positionCSS2/3无检索对象的定位方式
      z-indexCSS2无检索或设置对象的层叠顺序
      topCSS2无检索或设置对象参照相对物顶边界向下偏移位置。
      rightCSS2无检索或设置对象参照相对物右边界向左偏移位置。
      bottomCSS2无检索或设置对象参照相对物底边界向上偏移位置。
      leftCSS2无检索或设置对象参照相对物左边界向右偏移位置。
      clipCSS2/3无检索或设置对象的可视区域。区域外的部分是透明的

      紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性



      table 1.1 heading
      属性描述
      position

      规定元素的定位类型。

      static         
      静态定位 -- 约等于标准流
      元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

      relative 
      相对定位 -- 不脱标，老家留坑，形影分离。
      元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占空间仍保留。
      相对定位，就是微调元素位置的。让元素相对自己原来的位置，进行位置调整。
      作用：      微调元素；子绝父相（做绝对定位的参考）。

      absolute   
      绝对定位 -- 脱标
      元素框从标准流中完全删除，所占空间关闭，不再遵守标准流的性质，margin:0 auto;失效。盒子居中（left:50%; margin-left:负的宽度的一半）
      绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
      元素绝对定位后，不论原来它在正常流中生成何种类型的框，定位后都生成一个块级框，不再区分所谓的行内元素、块级元素，不需要display:block;就可以设置宽、高。
      绝对定位的参考点：
      1）元素没有已定位的祖先元素
           如果用      top描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角。
           如果用bottom描述，那么就是浏览器首屏窗口尺寸，对应的页面的左下角。
      2）元素存在已定位的祖先元素
           如果父辈元素中存在已定位的元素，那么将以最近的父辈元素，为参考点。无视参考盒子的padding，以其border内侧为参考点，进行定位。

      fixed
      固定定位 -- 脱标，IE6不兼容。
      元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗（浏览器窗口）本身，而不是页面。页面如何滚动，这个盒子显示的位置不变。

      子绝父绝、子绝父相、子绝父固，都可以给儿子定位。但是，工程上子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。工程上，“子绝父相”有意义，父亲没有脱标，儿子脱标在父亲的范围里面移动。

      语法：

      position：static | relative | absolute | fixed | center | page | sticky

      默认值：static

      适用于：除display属性定义为table-column-group | table-column之外的所有元素

      继承性：无

      动画性：否

      计算值：指定值

      媒体：视觉

      取值：

      static：
      对象遵循常规流。此时4个定位偏移属性不会被应用。
      relative：
      对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
      absolute：
      对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
      fixed：
      与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
      center：
      与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。（CSS3）
      page：
      与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3）
      sticky：
      对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）

      * CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

      说明：

      检索对象的定位方式。
      • 当position的值为非static时，其层叠级别通过z-index属性定义。
      • 绝对定位的元素，在top，right，bottom，left属性未设置时，会紧随在其前面的兄弟元素之后，但在位置上不影响常规流中的任何元素。用这个特性你或许会干这样的事：demo
      • 对应的脚本特性为position。
      z-index

      语法：

      z-index: auto | <integer>

      默认值：auto

      适用于：定位元素。即定义了position为非static的元素

      继承性：无

      动画性：当值为<integer>时

      计算值：指定的值

      媒体：视觉

      取值：

      auto：
      元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。
      <integer>：
      用整数值来定义堆叠级别。可以为负值。

      说明：

      检索或设置对象的层叠顺序。
      • z-index用于确定元素在当前层叠上下文中的层叠级别，并确定该元素是否创建新的局部层叠上下文。
      • 每个元素层叠顺序由所属的层叠上下文和元素本身的层叠级别决定（每个元素仅属于一个层叠上下文）。
      • 同一个层叠上下文中，层叠级别大的显示在上面，反之显示在下面。
      • 同一个层叠上下文中，层叠级别相同的两个元素，依据它们在HTML文档流中的顺序，写在后面的将会覆盖前面的。
      • 不同层叠上下文中，元素的显示顺序依据祖先的层叠级别来决定，与自身的层叠级别无关。
      • 当z-index未定义或者值为auto时，在IE6,7下会创建新的局部层叠上下文，而在高级浏览器中，按照规范不产生新的局部层叠上下文
      top

      语法：

      top: auto | <length> | <percentage>

      默认值：auto

      适用于：定位元素。即定义了position为非static的元素

      继承性：无

      动画性：当值为<length> | <percentage>时

      计算值：当position为static时，计算值是auto。
      为relative时，如果top和bottom都是auto，则它们的计算值是0；如果top和bottom其中一个为auto，则auto相当于另一个的负值，即top = -bottom；如果top和bottom的值都不为auto，则忽略bottom。
      否则在其它情况下，当指定值为<length>时，计算值为指定值，当指定值为<percentage>时，计算值为计算后的绝对值。除去这些情况，都为auto

      媒体：视觉

      取值：

      auto：
      无特殊定位，根据HTML定位规则在文档流中分配
      <length>：
      用长度值来定义距离顶部的偏移量。可以为负值。
      <percentage>：
      用百分比来定义距离顶部的偏移量。百分比参照包含块的高度。可以为负值。

      说明：

      检索或设置对象参照相对物顶边界向下偏移位置。
      • 该属性用来指定盒子参照相对物顶边界向下偏移。相对定位元素的相对物是自身，绝对定位和居中定位元素是从包含块的padding边界开始计算偏移值
      • 对应的脚本特性为top。
      right检索或设置对象参照相对物右边界向左偏移位置。
      bottom检索或设置对象参照相对物底边界向上偏移位置。
      left检索或设置对象参照相对物左边界向右偏移位置。
      clip

      语法：

      clip：auto | <shape>

      <shape>：rect(<number>|auto <number>|auto <number>|auto <number>|auto)

      默认值：auto

      适用于：绝对定位元素

      继承性：无

      动画性：当值为<shape>时

      计算值：指定的值

      媒体：视觉

      取值：

      auto：
      对象无剪切
      rect(<number>|auto <number>|auto <number>|auto <number>|auto)：
      依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。
      上-左 方位的裁剪：从0开始剪裁直到设定值，即 上-左 方位的auto值等同于0；
      右-下 方位的裁剪：从设定值开始剪裁直到最右边和最下边，即 右-下 方位的auto值为盒子的实际宽度和高度；

      示例：clip:rect(auto 50px 20px auto)

      说明：上边不剪切，右边从左起第50个像素开始剪切直至最右边，下边从上起第20个像素开始剪切直至最底部，左边不剪切

      * CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

      说明：

      检索或设置对象的可视区域。区域外的部分是透明的。
      • 这个属性将被废弃，推荐使用 clip-path 代替，在过渡阶段，仍然会存在一段时间。
      • 必须将position的值设为absolute或者fixed，此属性方可使用。
      • 对应的脚本特性为clip。

      属性 值 描述
      其包含块下边界之间的偏移。
      clearleft |
      right |
      both |
      none      		 规定元素的哪一侧不允许其他浮动元素。
      cursorurl |
      default |
      auto |
      crosshair |
      pointer |
      move |
      (e|w|s|n| ne|nw|se|sw)-resize |
      text |
      wait |
      help


      默认值：auto      		 规定要显示的光标的类型（形状）。
      object.style.cursor="crosshair"

      该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。

      可能的值：
      url               需使用的自定义光标的 URL。（注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。）
      default        默认光标（通常是一个箭头）
      auto            默认。浏览器设置的光标。
      crosshair    光标呈现为十字线。
      pointer        光标呈现为指示链接的指针（一只手）
      move          此光标指示某对象可被移动。
      e-resize      此光标指示矩形框的边缘可被向右（东）移动。
      ne-resize    此光标指示矩形框的边缘可被向上及向右移动（北/东）。
      nw-resize    此光标指示矩形框的边缘可被向上及向左移动（北/西）。
      n-resize       此光标指示矩形框的边缘可被向上（北）移动。
      se-resize     此光标指示矩形框的边缘可被向下及向右移动（南/东）。
      sw-resize    此光标指示矩形框的边缘可被向下及向左移动（南/西）。
      s-resize       此光标指示矩形框的边缘可被向下移动（南）。
      w-resize      此光标指示矩形框的边缘可被向左移动（西）。
      text              此光标指示文本。
      wait              此光标指示程序正忙（通常是一只表或沙漏）。
      help             此光标指示可用的帮助（通常是一个问号或一个气球）。
      displayblock |
      inline |
      none |
      inherit

      默认值： inline

      不继承      		 规定建立布局时元素应该生成的框的类型。
      object.style.display="inline"

      none    此元素不会被显示。不占用文档中的空间。
      block    此元素将显示为块级元素，此元素前后会带有换行符。
      inline    默认。此元素会被显示为内联元素，元素前后没有换行符。
      inherit   规定应该从父元素继承 display 属性的值。
      floatleft |
      right |
      none

      默认值：none      		 规定框是否应该浮动。

      浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
      由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
      overflowhidden  规定当内容溢出元素框时发生的事情。
      vertical-align默认值：baseline

      不继承      		 设置元素的垂直对齐方式。
      object.style.verticalAlign="bottom"

      可能的值：

      该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
      visibilityvisible |
      hidden |
      collapse|
      inherit

      默认值：visible      		 规定是否显示一个元素生成的元素框。元素仍占据其原来的空间，不过可以完全不可见。
      object.style.visibility="hidden"

      可能的值：
      visible       默认值。元素是可见的。
      hidden      元素是不可见的。但元素仍占据其原来的空间。
      collapse    当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
      inherit        规定应该从父元素继承 visibility 属性的值。

      提示：即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。
      z-indexnumber

      默认值：0
      		 设置元素的堆叠顺序。

      只有定位了的元素，才能有z-index值。即，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。

      如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁能压住别人。定位了的元素，永远能够压住没有定位的元素。

      从父现象：若父亲的z-index值小，儿子再牛逼也没用。

      打印

      属性版本继承性描述
      pageCSS3无检索或指定显示对象容器时使用的页面类型。
      page-break-beforeCSS2无检索或设置对象之前出现的页分割符。
      page-break-afterCSS2无检索或设置对象之后出现的页分割符。
      page-break-insideCSS2无检索或设置对象容器内部出现的页分割符。


      table 1.1 heading
      属性描述
      page

      语法：

      page：auto | <identifier>

      默认值：auto

      适用于：所有元素

      继承性：无

      动画性：否

      计算值：指定值

      媒体：页面

      取值：

      auto：
      参照当前的默认页面
      <identifier>：
      指定@page规则下的页面类型定义

      说明：

      检索或指定显示对象容器时使用的页面类型。参阅@page

      • 示例代码：

        @page rotated{size:landscape;}
p{page:rotated;page-break-before:left;}
      • 对应的脚本特性为page。
      page-break-before

      语法：

      page-break-before：auto | always | avoid | left | right

      默认值：auto

      适用于：所有元素

      继承性：无

      动画性：否

      计算值：指定值

      媒体：页面

      取值：

      auto：
      如果需要，在对象之前插入页分割符
      always：
      始终在对象之前插入页分割符
      avoid：
      避免在对象前面插入页分割符
      left：
      在对象前面插入页分割符直到它到达一个空白的左页边
      right：
      在对象前面插入页分割符直到它到达一个空白的右页边

      说明：

      检索或设置对象之前出现的页分割符。
      • 对应的脚本特性为pageBreakBefore。
      page-break-after

      语法：

      page-break-after：auto | always | avoid | left | right

      默认值：auto

      适用于：所有元素

      继承性：无

      动画性：否

      计算值：指定值

      媒体：页面

      取值：

      auto：
      如果需要，在对象之后插入页分割符
      always：
      始终在对象之后插入页分割符
      avoid：
      避免在对象之后插入页分割符
      left：
      在对象之后插入页分割符直到它到达一个空白的左页边
      right：
      在对象之后插入页分割符直到它到达一个空白的右页边

      说明：

      检索或设置对象之后出现的页分割符。
      • 对应的脚本特性为pageBreakAfter。
      page-break-inside

      语法：

      page-break-inside：auto | avoid

      默认值：auto

      适用于：所有元素

      继承性：无

      动画性：否

      计算值：指定值

      媒体：页面

      取值：

      auto：
      如果需要，在当前对象内部插入页分割符
      avoid：
      避免在当前对象内部插入页分割符

      说明：

      检索或设置对象容器内部出现的页分割符。
      • 对应的脚本特性为pageBreakInside。

      表格

      属性版本继承性描述
      table-layoutCSS2无设置或检索表格的布局算法
      border-collapseCSS2有设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开
      border-spacingCSS2有设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距
      caption-sideCSS2有设置或检索表格的caption对象是在表格的那一边
      empty-cellsCSS2有设置或检索当表格的单元格无内容时，是否显示该单元格的边框


      table 1.1 heading
      属性描述
      table-layout

      语法：

      table-layout：auto | fixed

      默认值：auto

      适用于：table系元素

      继承性：有

      动画性：否

      计算值：指定值

      取值：

      auto：
      默认的自动算法。布局将基于各单元格的内容，换言之，可能你给某个单元格定义宽度为100px，但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来，速度很慢
      fixed：
      固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。也就是说，内容可能被裁切

      说明：

      设置或检索表格的布局算法。
      • 通常fixed算法会比auto算法高效，尤其是对于那些长表格来说。fixed算法使得表格可以像其它元素一样一行一行的渲染。
      • 对应的脚本特性为tableLayout。
      border-collapse

      语法：

      border-collapse：separate | collapse

      默认值：separate

      适用于：table系元素

      继承性：有

      动画性：否

      计算值：指定值

      取值：

      separate：
      边框独立
      collapse：
      相邻边被合并

      说明：

      设置或检索表格的行和单元格的边是合并还是独立。
      border-spacing

      语法：

      border-spacing：<length>{1,2}

      默认值：0

      适用于：table系元素

      继承性：有

      动画性：否

      计算值：两个绝对长度值

      取值：

      <length>：
      用长度值来定义行和单元格的边框在横向和纵向上的间距。不允许负值

      说明：

      设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距
      • 该属性作用等同于标签属性cellspacing(单元格边距)。border-spacing:0等同于cellspacing="0"
      • 只有当表格边框独立（即 <' border-collapse '> 属性等于separate时）此属性才起作用。
      • 如果提供全部两个length值时，第一个作用于横向间距，第二个作用于纵向间距。
      • 如果只提供一个length值时，这个值将作用于横向和纵向上的间距。
      • 对应的脚本特性为borderSpacing。
      caption-side

      语法：

      caption-side：top | bottom

      默认值：top

      适用于：table系元素

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      top：
      指定caption在表格上边
      bottom：
      指定caption在表格下边

      说明：

      设置或检索表格的caption对象是在表格的那一边。
      • 要在IE7及以下浏览器中实现top与bottom参数值的效果，可直接在caption标签内定义标签属性valign为top和bottom。
      • Firefox还额外支持right和left两个非标准值
      • 对应的脚本特性为captionSide。
      empty-cells

      语法：

      empty-cells：hide | show

      默认值：show

      适用于：table系元素

      继承性：有

      动画性：否

      计算值：指定值

      取值：

      hide：
      指定当表格的单元格无内容时，隐藏该单元格的边框。
      show：
      指定当表格的单元格无内容时，显示该单元格的边框。

      说明：

      设置或检索当表格的单元格无内容时，是否显示该单元格的边框。
      • IE7及以下浏览器中默认隐藏无内容的单元格边框，要想使其获得与show参数值相同的效果，可以变相给该空单元格加个占位且不可见的元素，例如全角空格或&nbsp;等等。
      • 只有当表格边框独立（即 <' border-collapse '> 属性等于separate时）此属性才起作用。
      • 对应的脚本特性为emptyCells。


      文本

      文字阴影与边框阴影相似，可分别设置偏移量、模糊度、颜色（可设透明度）。
      单行文本溢出，需要配合overflow:hidden; white-space: nowrap;
      难理解的点：
      自已要多试着理解一下关于white-space的各个属性值之间的差异；

      换行符指的我们在键盘上的Enter键，Enter换行符会被当成空行来对待，而由Tab、Space产生的换行，则会视为一个空格。

      上述方法只能解决单行文本的溢出问题，多行文本溢出处理可参照下面的方法，但是有比较严重的兼容性，需要慎重选择，比较完备的多行溢出需要JS辅助完成，可自行尝试。
      多行文本文字溢出处理，非标准属性，可应用于移动端
      了解常握white-space 使用
      属性版本继承性描述
      text-transformCSS1/3有检索或设置对象中的文本的大小写
      white-spaceCSS1有设置或检索对象内空格的处理方式
      tab-sizeCSS3有检索或设置对象中的制表符的长度
      word-wrapCSS3有设置或检索当内容超过指定容器的边界时是否断行
      overflow-wrapCSS3有设置或检索当内容超过指定容器的边界时是否断行
      word-breakCSS3有设置或检索对象内文本的字内换行行为
      text-alignCSS1/3有设置或检索对象中内容的水平对齐方式
      text-align-lastCSS3有设置或检索一个块内的最后一行（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）或者被强制打断的行的对齐方式
      text-justifyCSS3有设置或检索对象内调整文本使用的对齐方式
      word-spacingCSS1/3有检索或设置对象中的单词之间的最小，最大和最佳间隙
      letter-spacingCSS1/3有检索或设置对象中的字符之间的最小，最大和最佳间隙
      text-indentCSS1/3有检索或设置对象中的文本的缩进
      vertical-alignCSS1/2无设置或检索对象内容的垂直对其方式
      line-heightCSS1有检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离
      text-size-adjustCSS3有检索或设置移动端页面中对象文本的大小调整


      table 1.1 heading
      属性描述
      text-transform

      语法：

      text-transform：none | capitalize | uppercase | lowercase | full-width

      默认值：none

      适用于：所有元素

      继承性：有

      动画性：否

      计算值：指定值

      取值：

      none：
      无转换
      capitalize：
      将每个单词的第一个字母转换成大写
      uppercase：
      将每个单词转换成大写
      lowercase：
      将每个单词转换成小写
      full-width：
      将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式，将保留原样。这个值通常用于排版拉丁字符和数字等表意符号。（CSS3）

      说明：

      检索或设置对象中的文本的大小写。
      • 对应的脚本特性为textTransform。
      white-space

      语法：

      white-space：normal | pre | nowrap | pre-wrap | pre-line

      默认值：normal

      适用于：所有元素

      继承性：有

      动画性：否

      计算值：指定值

      取值：

      normal：
      默认处理方式。
      pre：
      用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象
      nowrap：
      强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。
      pre-wrap：
      用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
      pre-line：
      保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。

      说明：

      设置或检索对象内空格的处理方式。
      • 对应的脚本特性为whiteSpace。
      tab-size

      语法：

      tab-size：<integer> | <length>

      默认值：8

      适用于：块容器

      继承性：有

      动画性：当值为 <length> 时

      计算值：指定值

      取值：

      <integer>：
      用整数值指定制表符的长度。不允许负值。
      <length>：
      用长度值指定制表符的长度。不允许负值。

      说明：

      检索或设置对象中的制表符的长度。
      • 该属性决定了制表符(U+0009)的宽度，整数代表空格(U+0020)的倍数(如：tab-size:4; 表示制表符宽度是4个空格的宽度)
      • 只有当 <' white-space '> 的属性值为：pre | pre-wrap时，该属性的定义才有效
      • 对应的脚本特性为tabSize。
      word-wrap

      语法：

      word-wrap：normal | break-word

      默认值：normal

      适用于：所有元素

      继承性：有

      动画性：否

      计算值：指定值

      相关属性：<' overflow-wrap '> || <' word-break '>

      取值：

      normal：
      允许内容顶开或溢出指定的容器边界。
      break-word：
      内容将在边界内换行。如果需要，单词内部允许断行。

      说明：

      设置或检索当内容超过指定容器的边界时是否断行。
      • 作为IE的私有属性之一，IE5.5率先实现了 <' word-wrap '> ，后期被w3c采纳成标准属性；
      • CSS3中将 <' word-wrap '> 改名为 <' overflow-wrap '>；
      • 对应的脚本特性为wordWrap。
      overflow-wrap

      语法：

      overflow-wrap：normal | break-word

      默认值：normal

      适用于：所有元素

      继承性：有

      动画性：否

      计算值：指定值

      相关属性：<' word-wrap '> || <' word-break '>

      取值：

      normal：
      允许内容顶开或溢出指定的容器边界。
      break-word：
      内容将在边界内换行。如果需要，单词内部允许断行。

      说明：

      设置或检索当内容超过指定容器的边界时是否断行。
      • CSS3中将 <' word-wrap '> 改名为 <' overflow-wrap '>；
      • 由于历史原因，当你使用 <' overflow-wrap '> 时，最好同时使用 <' word-wrap '> 作为备选，作向前兼容。
      • 对应的脚本特性为overflowWrap。
      word-break

      语法：

      word-break：normal | keep-all | break-all

      默认值：normal

      适用于：所有元素

      继承性：有

      动画性：否

      计算值：指定值

      相关属性：<' word-wrap '>

      取值：

      normal：
      依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
      keep-all：
      与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。
      break-all：
      该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字母间断行。

      说明：

      设置或检索对象内文本的字内换行行为。
      • 对于解决防止页面中出现连续无意义的长字符打破布局，应该使用break-all属性值；
      • 作为IE的私有属性之一，IE5.5率先实现了 <' word-break '> ，后期被w3c采纳成标准属性；
      • 对应的脚本特性为wordBreak。
      text-align

      语法：

      text-align：start | end | left | right | center | justify | match-parent |
       justify-all

      默认值：start

      适用于：块容器

      继承性：有

      动画性：否

      计算值：指定值，除 match-parent 值外

      取值：

      left：
      内容左对齐。
      center：
      内容居中对齐。
      right：
      内容右对齐。
      justify：
      内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。（CSS3）
      start：
      内容对齐开始边界。（CSS3）
      end：
      内容对齐结束边界。（CSS3）
      match-parent：
      这个值和 inherit 表现一致，只是该值继承的 start 或 end 关键字是针对父母的 <' direction '> 值并计算的，计算值可以是 left 和 right 。（CSS3）
      justify-all：
      效果等同于 justify，但还会让最后一行也两端对齐。（CSS3）

      * CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

      说明：

      设置或检索对象中内容的水平对齐方式。
      • 块级元素的文本是一些堆叠的线框
      • 大部分浏览器要使得 <' text-align '> 的justify两端对齐生效，需要在汉字间插入有空白，如空格；
      • 块内的最后一行文本（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）及被强制打断的行，其两端对齐需使用 <' text-align-last '>；
      • IE浏览器下，如果 <' text-align-last '> 要生效，必须先定义 <' text-align '> 为justify；
      • 单行两端对齐效果变得比较简单：

        css code：

        li{overflow:hidden;width:200px;height:21px;text-align:justify;
text-align-last:justify;}
li:after{display:inline-block;overflow:hidden;width:100%;
height:0;content:'';}

        html code：

        <ul>
    <li>我 是 谁</li>
    <li>你 又 是 谁</li>
    <li>世 界 末 日 2012</li>
</ul>

        以上代码3个li中的内容都将两端对齐

        需注意几点：
        • 所有主流浏览器都支持 text-align 的 justify 属性值；
        • text-align不处理强制打断的行，也不处理块内的最后一行，换句话说，如果块内仅有一行文本（该行既是第一行也是最后一行），这时仅设置text-align:justify无法让该行两端对齐；
        • text-align-last 是用来处理块内的最后一行和强制打断的行的，所以当要设置单行文本两端对齐时，需使用该属性；
        • 大部分浏览器要使得两端对齐生效，需在文本间插入空白，如空格（如果一行仅有2个汉字，Firefox也需在之间插入空白）；
        • 大部分浏览器尚不支持 text-align-last；
        依据上述的点，要实现单行两端对齐，可以走2个方向：
        1. 由于所有浏览器都支持 text-align 的 justify 属性值，但不全支持 text-align-last，我们可以对非IE及IE7以上浏览器使用伪对象生成额外的内容（IE7及以下浏览器不支持伪对象，使用text-align-last处理），置于第二行并将其隐藏，这时第一行文本（即要对齐的那个单行文本）可使用text-align:justify来对齐
        2. 支持 text-align-last 的浏览器，如IE, Firefox使用 text-align-last 处理，不支持的浏览器使用如上述方法处理；

        所以就目前情况来看，使用第一种方案是比较简约的，可以轻易的兼容IE5.5-10, Firefox, Chrome, Safari, Opera

        查看 css两端对齐详解 css两端对齐效果demo

      • 对应的脚本特性为textAlign。
      text-align-last

      语法：

      text-align-last：auto | start | end | left | right | center | justify

      默认值：auto

      适用于：块容器

      继承性：有

      动画性：否

      计算值：指定值

      取值：

      auto：
      无特殊对齐方式。
      left：
      内容左对齐。
      center：
      内容居中对齐。
      right：
      内容右对齐。
      justify：
      内容两端对齐。
      start：
      内容对齐开始边界。
      end：
      内容对齐结束边界。

      说明：

      设置或检索一个块内的最后一行（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）或者被强制打断的行的对齐方式
      • 如果某一行同时也是块内的第一行或者第一行但后面紧跟着强制换行，除非显示的指定 <' text-align '> 第一行对齐方式（值 'start end'），否则 <' text-align-last '> 将会覆盖 <' text-align '>；
      • 如果auto值被指定，内容的对齐方式将依据 <' text-align '> 的设定，除非 <' text-align '> 设置为justify；
      • 作为IE的私有属性之一，IE5.5率先实现了 <' text-align-last '>，后期被w3c采纳成标准属性；
      • IE7及以下浏览器只实现了块内最后一行的对齐方式，没有处理被强制打断的行的对齐方式，从IE8开始，这两种形式的行对齐都被支持；
      • IE浏览器下，如果 <' text-align-last '> 要生效，必须先定义 <' text-align '> 为justify；
      • 查看 form表单标签名两端对齐效果demo
      • 对应的脚本特性为textAlignLast。
      text-justify

      语法：

      text-justify：auto | none | inter-word | inter-ideograph | inter-cluster | distribute | kashida

      默认值：auto

      适用于：块容器及某些内联元素

      继承性：有

      动画性：否

      计算值：指定值

      取值：

      auto：
      允许浏览器用户代理确定使用的两端对齐法则。
      none：
      禁止两端对齐。
      inter-word：
      通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法，它的两端对齐行为对段落的最后一行无效。
      inter-ideograph：
      为表意字文本提供完全两端对齐，增加或减少表意字和词间的空格。
      inter-cluster：
      调整文本无词间空格的行。这种模式的调整是用于优化亚洲语言文档的
      distribute：
      通过增加或减少字或字母之间的空格对齐文本，适用于东亚文档，尤其是泰国。
      kashida：
      通过拉长选定点的字符调整文本。这种调整模式是特别为阿拉伯脚本语言提供的。需要IE5.5+支持

      说明：

      设置或检索对象内调整文本使用的对齐方式。
      • 因为这个属性影响文本布局，所以 <' text-align '> 属性必须被设置为justify。
      • 对应的脚本特性为textJustify。
      word-spacing

      语法：

      word-spacing：normal | <length> | <percentage>

      默认值：normal

      适用于：所有元素

      继承性：有

      动画性：非normal值时

      计算值：指定值

      相关属性：<' letter-spacing '>

      取值：

      normal：
      默认间隔
      <length>：
      用长度值指定间隔。可以为负值。
      <percentage>：
      用百分比指定间隔。可以为负值。（CSS3）

      说明：

      检索或设置对象中的单词之间的最小，最大和最佳间隙。
      • 该属性将指定的间隔添加到每个单词(词内不发生)之后，但最后一个字将被排除在外。
      • 判断是否为单词的依据是单词间是否有空格。
      • 对应的脚本特性为wordSpacing。
      letter-spacing

      语法：

      letter-spacing：normal | <length> | <percentage>

      默认值：normal

      适用于：所有元素

      继承性：有

      动画性：非normal值时

      计算值：指定值

      相关属性：<' word-spacing '>

      取值：

      normal：
      默认间隔
      <length>：
      用长度值指定间隔。可以为负值。
      <percentage>：
      用百分比指定间隔。可以为负值。（CSS3）

      说明：

      检索或设置对象中的字符之间的最小，最大和最佳间隙。
      • 该属性将指定的间隔添加到每个文字(包括单词内的每个字母)之后；
      • <' letter-spacing '> 不能被应用于一行的开始和结束；
      • 对应的脚本特性为letterSpacing。
      text-indent

      语法：

      text-indent：[ <length> | <percentage> ] && hanging? && each-line?

      默认值：0

      适用于：块容器

      继承性：有

      动画性：当使用值为非关键字时

      计算值：指定值

      取值：

      <length>：
      用长度值指定文本的缩进。可以为负值。
      <percentage>：
      用百分比指定文本的缩进。可以为负值。
      each-line：
      定义缩进作用在块容器的第一行或者内部的每个强制换行的首行，软换行不受影响。（CSS3）
      hanging：
      反向所有被缩进作用的行。（CSS3）

      说明：

      检索或设置对象中的文本的缩进。
      • 内联对象要使用该属性必须先使该对象表现为块级或内联块级。
      • hanging和each-line关键字紧随在缩进数值之后

        示例代码：

        div{text-indent:2em each-line;}

        以上代码将使得div内部的第一行及每个强制换行的首行都拥有2em的缩进

      • 对应的脚本特性为textIndent。
      vertical-align

      语法：

      vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>

      默认值：baseline

      适用于：内联及 table-cell 元素

      继承性：无

      动画性：当值为 <length> 时

      计算值：指定值

      取值：

      baseline：
      将支持valign特性的对象的内容与基线对齐
      sub：
      垂直对齐文本的下标
      super：
      垂直对齐文本的上标
      top：
      将支持valign特性的对象的内容与对象顶端对齐
      text-top：
      将支持valign特性的对象的文本与对象顶端对齐
      middle：
      将支持valign特性的对象的内容与对象中部对齐
      bottom：
      将支持valign特性的对象的文本与对象底端对齐
      text-bottom：
      将支持valign特性的对象的文本与对象顶端对齐
      <percentage>：
      用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。
      <length>：
      用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。（CSS2）

      说明：

      设置或检索内联元素在行框内的垂直对其方式。
      • 对应的脚本特性为verticalAlign。
      line-height

      语法：

      line-height：normal | <length> | <percentage> | <number>

      默认值：normal

      适用于：所有元素

      继承性：有

      动画性：当值为 <length> | <number> 时

      计算值：指定值

      取值：

      normal：
      允许内容顶开或溢出指定的容器边界。
      <length>：
      用长度值指定行高。不允许负值。
      <percentage>：
      用百分比指定行高，其百分比取值是基于字体的高度尺寸。不允许负值。
      <number>：
      用乘积因子指定行高。不允许负值。

      说明：

      检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。
      • 对应的脚本特性为lineHeight。
      text-size-adjust

      语法：

      text-size-adjust：auto | none | <percentage>

      默认值：auto

      适用于：所有元素

      继承性：有

      动画性：当取值为<percentage>时

      计算值：指定值

      取值：

      auto：
      文本大小根据设备尺寸进行调整。
      none：
      文本大小不会根据设备尺寸进行调整。
      <percentage>：
      用百分比来指定文本大小在设备尺寸不同的情况下如何调整。

      说明：

      检索或设置移动端页面中对象文本的大小调整。
      • 该属性只在移动设备上生效；
      • 如果你的页面没有定义meta viewport，此属性定义将无效；
      • 对应的脚本特性为textSizeAdjust。


      文本装饰

      属性版本继承性描述
      text-decorationCSS1/3无复合属性。检索或设置对象中的文本的装饰。
      text-decoration-lineCSS3无检索或设置对象中的文本装饰线条的位置。
      text-decoration-colorCSS3无检索或设置对象中的文本装饰线条的颜色。
      text-decoration-styleCSS3无检索或设置对象中的文本装饰线条的形状。
      text-decoration-skipCSS3有检索或设置对象中的文本装饰线条必须略过内容中的哪些部分。
      text-underline-positionCSS3有检索或设置对象中的下划线的位置。
      text-shadowCSS3有设置或检索对象中文本的文字是否有阴影及模糊效果

      table 1.1 heading
      titletitle
      text-decoration

      语法：

      text-decoration：<' text-decoration-line '> || <' text-decoration-style '> || <' text-decoration-color '>

      默认值：看每个独立属性

      适用于：所有元素

      继承性：无

      动画性：看每个独立属性

      计算值：看每个独立属性

      相关属性：<' text-decoration-skip '> || <' text-underline-position '>

      取值：

      <' text-decoration-line '>：
      指定文本装饰的种类。相当于CSS2.1的 <' text-decoration '> 属性，可取值：none | underline | overline | line-through | blink
      <' text-decoration-style '>：
      指定文本装饰的样式。
      <' text-decoration-color '>：
      指定文本装饰的颜色。

      说明：

      复合属性。检索或设置对象中的文本的装饰。
      • 所有浏览器均支持CSS2.1中的 <' text-decoration '> 属性，在CSS3中，该属性定义被移植到其新的分解属性 <' text-decoration-line '> 上；
      • 对应的脚本特性为textDecoration。
      text-decoration-line

      语法：

      text-decoration-line：none | [ underline || overline || line-through || blink ]

      默认值：none

      适用于：所有元素

      继承性：无

      动画性：否

      计算值：指定的值

      取值：

      none：
      指定文字无装饰
      underline：
      指定文字的装饰是下划线
      overline：
      指定文字的装饰是上划线
      line-through：
      指定文字的装饰是贯穿线
      blink：
      指定文字的装饰是闪烁。

      说明：

      检索或设置对象中的文本装饰线条的位置。
      • 相当于CSS2.1的 <' text-decoration '> 属性
      • 需要注意的是大部分浏览器都不支持blink值，因为规范允许用户代理忽略该效果；
      • 对应的脚本特性为textDecorationLine。
      text-decoration-color

      语法：

      text-decoration-color：<color>

      默认值：采用文本颜色

      适用于：所有元素

      继承性：无

      动画性：是

      计算值：计算后颜色值

      取值：

      <color>：
      指定颜色。

      说明：

      检索或设置对象中的文本装饰线条的颜色。
      • 对应的脚本特性为textDecorationColor。
      text-decoration-style

      语法：

      text-decoration-style：solid | double | dotted | dashed | wavy

      默认值：solid

      适用于：所有元素

      继承性：无

      动画性：否

      计算值：指定的值

      取值：

      solid：
      实线
      double：
      双线
      dotted：
      点状线条
      dashed：
      虚线
      wavy：
      波浪线

      说明：

      检索或设置对象中的文本装饰线条的形状。
      • 对应的脚本特性为textDecorationStyle。
      text-decoration-skip

      语法：

      text-decoration-skip：none | [ objects || spaces || ink || edges || box-decoration ]

      默认值：objects

      适用于：所有元素

      继承性：是

      动画性：否

      计算值：指定的值

      取值：

      none：
      不略过：文本装饰将绘制在所有文本内容及行内盒上。
      objects：
      略过原子内联元素（例如图片或内联块）
      spaces：
      略过空白：包括常规空白（U+0020）、制表符（U+0009）以及不间断空格（U+00A0）、表意空格（U+3000）、所有固定宽度空格（U+2000至U+200A、U+202F和U+205F）、以及相邻的字母间隔或单词间隔。
      ink：
      略过字符绘制处：中断装饰线，以显示文本装饰件将穿过该字形的文本。用户代理可能还会在该字形轮廓的两侧额外的略过一段距离。
      edges：
      用户代理应当将装饰线的起始、结束位置放置于较所装饰元素的内容边缘更靠内的位置，使得诸如两个紧密相邻的元素的下划线不会显示为一条下划线。（这在中文里很重要，对于中文，下划线是一种标点符号。）
      box-decoration：
      略过盒子的margin,border,padding区域。需要注意的是，这只针对祖先的装饰效果，装饰盒不会绘制自身的装饰。

      说明：

      检索或设置对象中的文本装饰线条必须略过内容中的哪些部分。
      • 对应的脚本特性为textDecorationSkip。
      text-underline-position

      语法：

      text-underline-position：auto | [ under || [ left | right ] ]

      默认值：auto

      适用于：所有元素

      继承性：是

      动画性：否

      计算值：特定值

      取值：

      auto：
      用户代理可能会使用任意算法确定下划线的位置。
      under：
      下划线的定位与元素内容盒子的下边缘相关
      left：
      下划线的定位与元素内容盒子的左边缘相关
      right：
      下划线的定位与元素内容盒子的右边缘相关

      说明：

      检检索或设置对象中的下划线的位置。
      • 对应的脚本特性为textUnderlinePosition。
      text-shadow

      语法：

      text-shadow：none | <shadow> [ , <shadow> ]*

      <shadow> = <length>{2,3} && <color>?

      默认值：none

      适用于：所有元素

      继承性：有

      动画性：是

      计算值：1个颜色加3个绝对长度

      取值：

      none：
      无阴影
      <length>①：
      第1个长度值用来设置对象的阴影水平偏移值。可以为负值
      <length>②：
      第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
      <length>③：
      如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
      <color>：
      设置对象的阴影的颜色。

      说明：

      设置或检索对象中文本的文字是否有阴影及模糊效果。参阅 <' box-shadow '> 属性。
      • 可以设定多组效果，每组参数值以逗号分隔。多组阴影特殊效果，Demo: 火焰文字 霓虹文字
      • 对应的脚本特性为textShadow。


      书写模式

      属性版本继承性描述
      directionCSS2有检索或设置文本流的方向
      unicode-bidiCSS2无用于同一个页面里存在从不同方向读进的文本显示。与 <' direction '> 属性一起使用
      writing-modeCSS3有设置或检索对象的内容块固有的书写方向

      table 1.1 heading
      属性描述
      direction

      语法：

      direction：ltr | rtl

      默认值：ltr

      适用于：所有元素

      继承性：有

      动画性：否

      计算值：特定值

      取值：

      ltr：
      文本流从左到右。
      rtl：
      文本流从右到左。

      说明：

      检索或设置文本流的方向。
      • 当指定一个内联元素的 <' unicode-bidi '> 属性为normal时， <' direction '> 属性设置不影响bidi重排序，即其设置不生效。
      • 对应的脚本特性为direction。
      unicode-bidi

      语法：

      unicode-bidi：normal | embed | bidi-override | isolate| isolate-override | plaintext

      默认值：normal

      适用于：所有元素

      继承性：无

      动画性：否

      计算值：特定值

      取值：

      normal：
      对象不打开附加的嵌入层，对于内联元素，隐式重排序跨对象边界进行工作。
      embed：
      对象打开附加的嵌入层，<' direction '> 属性的值指定嵌入层，在对象内部进行隐式重排序。
      bidi-override：
      严格按照 <' direction '> 属性的值重排序。忽略隐式双向运算规则。

      说明：

      用于同一个页面里存在从不同方向读进的文本显示。与 <' direction '> 属性一起使用
      • 对应的脚本特性为unicodeBidi。
      writing-mode

      语法：

      writing-mode：horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl

      默认值：normal

      适用于：除 <' display '> 属性定义为table-row-group | table-column-group | table-row | table-column之外的所有元素

      继承性：有

      动画性：否

      计算值：特定值

      取值：

      horizontal-tb：
      水平方向自上而下的书写方式。即 left-right-top-bottom（类似IE私有值lr-tb）
      vertical-rl：
      垂直方向自右而左的书写方式。即 top-bottom-right-left（类似IE私有值tb-rl）
      vertical-lr：
      垂直方向自左而右的书写方式。即 top-bottom-left-right
      lr-tb：
      左-右，上-下。对象中的内容在水平方向上从左向右流入，后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的（IE）
      tb-rl：
      上-下，右-左。对象中的内容在垂直方向上从上向下流入，自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的（IE）

      说明：

      设置或检索对象的内容块固有的书写方向。西方语言一般都是 lr-tb 的书写方式，但是亚洲语言 lr-tb | tb-rl 的书写方式都有。
      • 作为IE的私有属性之一，IE5.5率先实现了 writing-mode ，后期被w3c采纳成标准属性；
      • 此属性效果不能被累加使用。例如，父对象的此属性值设为 tb-rl ，子对象再设置该属性将不起作用，仍应用父对象的设置。
      • 对应的脚本特性为writingMode。

      2D/3D 转换

      转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合即将学习的过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
      2D 转换
      translate(x,y)  x、y 可为负值，相对自身移动，并未脱离文档流。
      左手坐标系：伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。
      左手法则：左手握住旋转轴，竖起拇指指向旋转轴正方向，正向旋转方向就是其余手指卷曲的方向。


      3D坐标轴，用X、Y、Z分别表示空间的3个维度，三条轴上互相垂直。


      属性版本继承性描述
      transformCSS3无检索或设置对象的变换
      transform-originCSS3无检索或设置对象中的变换所参照的原点
      transform-styleCSS3无指定某元素的子元素是否位于三维空间内
      perspectiveCSS3无指定观察者与「z=0」平面的距离
      perspective-originCSS3无指定透视点的位置
      backface-visibilityCSS3无指定元素背面面向用户时是否可见

      table 1.1 heading
      属性描述
      transform

      语法：

      transform：none | <transform-function>+

      transform-function list:

      matrix() = matrix(<number>[,<number>]{5,5})

      matrix3d() = matrix3d(<number>[,<number>]{15,15})

      translate() = translate(<translation-value>[,<translation-value>]?)

      translate3d() = translate3d(<translation-value>,<translation-value>,<length>)

      translatex() = translatex(<translation-value>)

      translatey() = translatey(<translation-value>)

      translatez() = translatez(<length>)

      rotate() = rotate(<angle>)

      rotate3d() = rotate3d(<number>,<number>,<number>,<angle>)

      rotatex() = rotatex(<angle>)

      rotatey() = rotatey(<angle>)

      rotatez() = rotatez(<angle>)

      scale() = scale(<number>[,<number>]?)

      scale3d() = scale3d(<number>,<number>,<number>)

      scalex() = scalex(<number>)

      scaley() = scaley(<number>)

      scalez() = scalez(<number>)

      skew() = skew(<angle>[,<angle>]?)

      skewx() = skewx(<angle>)

      skewy() = skewy(<angle>)

      perspective() = perspective(<length>)

      <translation-value> = <length> | <percentage>

      默认值：none

      适用于：所有块级元素及某些内联元素

      继承性：无

      动画性：是

      计算值：指定值，但相对长度会转换为绝对长度

      媒体：视觉

      取值：

      none：
      无转换

      2D Transform Functions：

      matrix()：
      以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
      translate()：
      指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
      translatex()：
      指定对象X轴（水平方向）的平移
      translatey()：
      指定对象Y轴（垂直方向）的平移
      rotate()：
      指定对象的2D rotation（2D旋转），需先有 <' transform-origin '> 属性的定义
      scale()：
      指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
      scalex()：
      指定对象X轴的（水平方向）缩放
      scaley()：
      指定对象Y轴的（垂直方向）缩放
      skew()：
      指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
      skewx()：
      指定对象X轴的（水平方向）扭曲
      skewy()：
      指定对象Y轴的（垂直方向）扭曲

      3D Transform Functions：

      matrix3d()：
      以一个4x4矩阵的形式指定一个3D变换
      translate3d()：
      指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
      translatez()：
      指定对象Z轴的平移
      rotate3d()：
      指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略
      rotatex()：
      指定对象在x轴上的旋转角度
      rotatey()：
      指定对象在y轴上的旋转角度
      rotatez()：
      指定对象在z轴上的旋转角度
      scale3d()：
      指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
      scalez()：
      指定对象的z轴缩放
      perspective()：
      指定透视距离

      说明：

      设置或检索对象的转换。
      • 对应的脚本特性为transform。
      transform-origin

      语法：

      transform-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?

      默认值：50% 50%，效果等同于center center

      适用于：所有块级元素及某些内联元素

      继承性：无

      动画性：当值为数值时

      计算值：除了指定绝对值，否则都为百分比

      媒体：视觉

      取值：

      <percentage>：
      用百分比指定坐标值。可以为负值。
      <length>：
      用长度值指定坐标值。可以为负值。
      left：
      指定原点的横坐标为left
      center①：
      指定原点的横坐标为center
      right：
      指定原点的横坐标为right
      top：
      指定原点的纵坐标为top
      center②：
      指定原点的纵坐标为center
      bottom：
      指定原点的纵坐标为bottom

      说明：

      设置或检索对象以某个原点进行转换。
      • 该属性提供2个参数值。
      • 如果提供两个，第一个用于横坐标，第二个用于纵坐标。
      • 如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。
      • 对应的脚本特性为transformOrigin。
      transform-style

      语法：

      transform-style：flat | preserve-3d

      默认值：flat

      适用于：变换元素

      继承性：无

      动画性：否

      计算值：指定值

      媒体：视觉

      取值：

      flat：
      指定子元素位于此元素所在平面内
      preserve-3d：
      指定子元素定位在三维空间内

      说明：

      指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。
      • 当该属性值为「preserve-3d」时，元素将会创建局部堆叠上下文。
      • 决定一个变换元素看起来是处在三维空间还是平面内，需要该元素的父元素上定义 <' transform-style '> 属性。
      • 对应的脚本特性为transformStyle。
      perspective

      语法：

      perspective：none | <length>

      默认值：none

      适用于：变换元素

      继承性：无

      动画性：当值为<length>时

      计算值：绝对长度或「none」

      媒体：视觉

      取值：

      none：
      不指定透视
      <length>：
      指定观察者距离「z=0」平面的距离，为元素及其内容应用透视变换。不允许负值

      说明：

      指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果。「z>0」的三维元素比正常大，而「z<0」时则比正常小，大小程度由该属性的值决定。
      • 当该属性值为「非none」时，元素将会创建局部堆叠上下文。
      • 对应的脚本特性为perspective。
      perspective-origin

      语法：

      perspective-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?

      默认值：50% 50%，效果等同于center center

      适用于：变换元素

      继承性：无

      动画性：当值为数值时

      计算值：除了指定绝对值，否则都为百分比

      媒体：视觉

      取值：

      <percentage>：
      用百分比指定透视点坐标值，相对于元素宽度。可以为负值。
      <length>：
      用长度值指定透视点坐标值。可以为负值。
      left：
      指定透视点的横坐标为left
      center①：
      指定透视点的横坐标为center
      right：
      指定透视点的横坐标为right
      top：
      指定透视点的纵坐标为top
      center②：
      指定透视点的纵坐标为center
      bottom：
      指定透视点的纵坐标为bottom

      说明：

      指定透视点的位置。
      • 该属性提供2个参数值。
      • 如果提供两个，第一个用于横坐标，第二个用于纵坐标。
      • 如果只提供一个，该值将用于横坐标；纵坐标将默认为center。
      • 对应的脚本特性为perspactiveOrigin。
      backface-visibility

      语法：

      backface-visibility：visible | hidden

      默认值：visible

      适用于：变换元素

      继承性：无

      动画性：否

      计算值：指定值

      媒体：视觉

      取值：

      visible：
      指定元素背面可见，允许显示正面的镜像。
      hidden：
      指定元素背面不可见

      说明：

      指定元素背面面向用户时是否可见。
      • 决定一个元素背面面向用户时是否可见，需要直接在该元素上定义 <' backface-visibility '> 属性，而不能在其父元素上，因为该属性默认为不可继承。
      • 对应的脚本特性为backfaceVisibility。

      渐变

      渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。
      可分为线性渐变、径向渐变、重复渐变。

      线性渐变指沿着某条直线朝一个方向产生渐变效果。必要的元素：方向、起始颜色、终止色；
      关于颜色起止，可以设置多个色值的渐变，并且可以分别设置渐变的距离
      如 linear-gradient(to left, yellow 10%, blue 15%, red 50%)

      径向渐变指从一个中心点开始沿着四周产生渐变效果。
      特点：
      1、辐射范围 
      2、中心点 ：中心位置参照的是盒子的左上角
      3、颜色的起止：其半径可以不等即可以是椭圆

      关于圆的知识同边框圆角章节的介绍

      table 1.1 heading
      属性值描述
      background-imagelinear-gradient( [ [ <shape> || <size> ] [ at <position>, ]? <color-stop> [, <color-stop> ]+ )
      		线性渐变
      background-imageradial-gradient( [ [ <shape> || <size> ] [ at <position>, ]? <color-stop> [, <color-stop> ]+ )径向渐变：从一个中心点开始沿着四周产生渐变效果。

      <shape> = circle | ellipse
      <size> = <extent-keyword> | [ <circle-size> || <ellipse-size> ]
      <position> = [<length> | <percentage> | left | center | right ]? [ <length> | <percentage> | top | center | bottom ]?
      <color-stop> = <color> [ <length> | <percentage> ]?

      <extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner
      <circle-size> = <length> 
      <ellipse-size> = [ <length> | <>percentage ]{2}

      <position> 确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个参数，第二个值默认为50%，即center。

      <length> 用长度值指定径向渐变圆心的纵坐标值，可以为负值。|| 用长度指定起止色位置，不允许负值。
      <percentage> 用百分比指定径向渐变圆心的横（或者纵）坐标值，可以为负值。|| 用百分比指定起止色位置，不允许负值。

      <color-stop> 用于指定渐变的起止颜色：
      <color> 指定颜色。
      <length> || <percentage> 指定起止位置。

      <shape> 确定圆的类型：
      circle：指定圆形的径向渐变。
      ellipse：指向椭圆形的径向渐变。

      <extent-keyword>   circle | ellipse 都接受该值作为 size：
      closest-size：指定径向渐变的半径长度为从圆心到离圆心最近 的边。
      closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近 的角。
      farthest-size：指定径向渐变的半径长度为从圆心到离圆心最远 的边。
      farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远 的边。

      <circle-size> circle 接受该值作为 size：
      用长度值指定正圆径向渐变的半径长度，不允许负值。

      <ellipse-size> ellipse 接受该值作为 size
      用长度值指定椭圆径向渐变的长半径或短半径，不允许负值。

      left：设置左边为径向渐变圆心的横坐标值。
      center：设置中间为径向渐变圆心的横坐标值。
      right：设置右边为径向渐变圆心的横坐标值。

      top：设置顶部为径向渐变圆心的纵坐标值。
      center：设置中间为径向渐变圆心的纵坐标值。
      bottom：设置底部为径向渐变圆心的纵坐标值。


      datarepeating-linear-gradient()重复线性渐变。
      datarepeating-radial-gradient()重复径向渐变。
      datadatadata
      datadatadata
      datadatadata
      datadatadata
      datadatadata
      datadatadata
      table 1.1 heading
      titletitle

      过渡

      过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
      帧动画：通过一帧一帧的关键画面按照固定顺序和速度播放。如电影胶片
      补间动画：自动完成从起始状到终止状的的过度。

      关于补间动画更多学习可查看http://mux.alimama.com/posts/1009
      特点：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。
      transition-property设置过渡属性
      transition-duration设置过渡时间
      transition-timing-function设置过渡速度
      transition-delay设置过渡延时
      贝塞尔曲线限定了过渡的轨迹。这部分没有提及，有兴趣同学自行查阅相关资料了解一下即可。
      以上四属性重在更解，具体细节可参考手册辅助记忆
      属性版本继承性描述
      transitionCSS3无复合属性。检索或设置对象变换时的过渡效果
      transition-propertyCSS3无检索或设置对象中的参与过渡的属性
      transition-durationCSS3无检索或设置对象过渡的持续时间
      transition-timing-functionCSS3无检索或设置对象中过渡的类型
      transition-delayCSS3无检索或设置对象延迟过渡的时间



      属性 值 描述
      transition

      语法：

      transition：<single-transition>[,<single-transition>]*

      <single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

      默认值：看每个独立属性

      适用于：所有元素，包含伪对象:after和:before

      继承性：无

      动画性：否

      计算值：看每个独立属性

      媒体：交互

      取值：

      <' transition-property '>：
      检索或设置对象中的参与过渡的属性
      <' transition-duration '>：
      检索或设置对象过渡的持续时间
      <' transition-timing-function '>：
      检索或设置对象中过渡的动画类型
      <' transition-delay '>：
      检索或设置对象延迟过渡的时间

      说明：

      复合属性。检索或设置对象变换时的过渡。
      • 注意：如果只提供一个<time>参数，则为 <' transition-duration '> 的值定义；如果提供二个<time>参数，则第一个为 <' transition-duration '> 的值定义，第二个为 <' transition-delay '> 的值定义
      • 可以为同一元素的多个属性定义过渡效果。示例：

        缩写方式：

        transition: border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

        拆分方式：

        transition-property: border-color, background-color, color; transition-duration: .5s, .5s, .5s; transition-timing-function: ease-in, ease-in, ease-in; transition-delay: .1s, .1s, .1s;
      • 如果定义了多个过渡的属性，而其他属性只有一个参数值，则表明所有需要过渡的属性都应用同一个参数值。据此可以对上面的例子进行缩写：

        拆分方式：

        transition-property: border-color, background-color, color; transition-duration: .5s; transition-timing-function: ease-in; transition-delay: .1s;
      • 如果需要定义多个过渡属性且不想指定具体是哪些属性过渡，同时其他属性只有一个参数值，据此可以对上面的例子进行缩写：

        缩写方式：

        transition: all .5s ease-in .1s;

        拆分方式：

        transition-property:all; transition-duration: .5s; transition-timing-function: ease-in; transition-delay: .1s;
      • 对应的脚本特性为transition。
      transition-property

      语法：

      transition-property：none | <single-transition-property>[ ,<single-transition-property> ]*

      <single-transition-property> = all | <IDENT>

      默认值：all

      适用于：所有元素，包含伪对象:after和:before

      继承性：无

      动画性：否

      计算值：指定值

      媒体：视觉

      取值：

      none：
      不指定过渡的css属性
      all：
      所有可以进行过渡的css属性
      <IDENT>：
      指定要进行过渡的css属性

      说明：

      检索或设置对象中的参与过渡的属性。
      • 默认值为：all。默认为所有可以进行过渡的css属性。
      • 如果提供多个属性值，以逗号进行分隔。
      • 对应的脚本特性为transitionProperty。

      有过渡效果的属性：

      属性名称类型
      background-colorcolor
      background-imageonly gradients
      background-positionpercentage, length
      border-bottom-colorcolor
      border-bottom-widthlength
      border-colorcolor
      border-left-colorcolor
      border-left-widthlength
      border-right-colorcolor
      border-right-widthlength
      border-spacinglength
      border-top-colorcolor
      border-top-widthlength
      border-widthlength
      bottomlength, percentage
      colorcolor
      croprectangle
      font-sizelength, percentage
      font-weightnumber
      grid-*various
      heightlength, percentage
      leftlength, percentage
      letter-spacinglength
      line-heightnumber, length, percentage
      margin-bottomlength
      margin-leftlength
      margin-rightlength
      margin-toplength
      max-heightlength, percentage
      max-widthlength, percentage
      min-heightlength, percentage
      min-widthlength, percentage
      opacitynumber
      outline-colorcolor
      outline-offsetinteger
      outline-widthlength
      padding-bottomlength
      padding-leftlength
      padding-rightlength
      padding-toplength
      rightlength, percentage
      text-indentlength, percentage
      text-shadowshadow
      toplength, percentage
      vertical-alignkeywords, length, percentage
      visibilityvisibility
      widthlength, percentage
      word-spacinglength, percentage
      z-indexinteger
      zoomnumber
      transition-duration

      语法：

      transition-duration：<time>[ ,<time> ]*

      默认值：0

      适用于：所有元素，包含伪对象:after和:before

      继承性：无

      动画性：否

      计算值：指定值

      媒体：交互

      取值：

      <time>：
      指定对象过渡的持续时间

      说明：

      检索或设置对象过渡的持续时间。
      • 如果提供多个属性值，以逗号进行分隔。
      • 对应的脚本特性为transitionDuration。
      transition-timing-function

      语法：

      transition-timing-function：<single-transition-timing-function>[,<single-transition-timing-function>]*

      <single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)

      默认值：ease

      适用于：所有元素，包含伪对象:after和:before

      继承性：无

      动画性：否

      计算值：指定值

      媒体：交互

      取值：

      linear：
      线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
      ease：
      平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
      ease-in：
      由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
      ease-out：
      由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
      ease-in-out：
      由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
      step-start：
      等同于 steps(1, start)
      step-end：
      等同于 steps(1, end)
      steps(<integer>[, [ start | end ] ]?)：
      接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
      cubic-bezier(<number>, <number>, <number>, <number>)：
      特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

      说明：

      检索或设置对象中过渡的动画类型。
      • 如果提供多个属性值，以逗号进行分隔。
      • 对应的脚本特性为transitionTimingFunction。
      transition-delay

      语法：

      transition-delay：<time>[ ,<time> ]*

      默认值：0

      适用于：所有元素，包含伪对象:after和:before

      继承性：无

      动画性：否

      计算值：指定值

      媒体：交互

      取值：

      <time>：
      指定对象过渡的延迟时间

      说明：

      检索或设置对象延迟过渡的时间。
      • 如果提供多个属性值，以逗号进行分隔。
      • 对应的脚本特性为transitionDelay。

      媒体查询

      由于网页呈现终端设备越来越趋向于多样化，尤其是移动终端（手机），具有不同屏幕尽寸、不同分辨率，为了保证网页能十分友好的呈现，CSS3为开发人员提供了可以识别呈现终端的方法，这样便可以有针对性的为不同的呈现终端分别进行处理，被广泛应用于响应式开发中。

      语法：

      <media_query_list>：[<media_query>[',' <media_query>]*]?

      <media_query>：[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*

      <expression>：'('<media_feature>[:<value>]?')'

      说明：

      通过不同的媒体类型和条件定义样式表规则。
      • 媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。
      • 媒体查询的大部分媒体特性都接受min和max用于表达“大于或等于”和“小与或等于”。如：width会有min-width和max-width

      • 媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。

        示例代码：

        @media screen and (width:800px){ … }
@import url(example.css) screen and (width:800px);
<link media="screen and (width:800px)" rel="stylesheet" href="example.css" />
<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?>

      媒体特性 Media Features

      媒体特性取值接受min/max描述
      width<length>yes定义输出设备中的页面可见区域宽度
      height<length>yes定义输出设备中的页面可见区域高度
      device-width<length>yes定义输出设备的屏幕可见宽度
      device-height<length>yes定义输出设备的屏幕可见高度
      orientationportrait | landscapeno定义'height'是否大于或等于'width'。值portrait代表是，landscape代表否
      aspect-ratio<ratio>yes定义'width'与'height'的比率
      device-aspect-ratio<ratio>yes定义'device-width'与'device-height'的比率。如常见的显示器比率：4/3, 16/9, 16/10
      color<integer>yes定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0
      color-index<integer>yes定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
      monochrome<integer>yes定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
      resolution<resolution>yes定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
      scanprogressive | interlaceno定义电视类设备的扫描工序
      grid<integer>no用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否



      table 1.1 heading
      属性描述
      width

      语法：

      width：<length>

      接受min/max前缀：是

      取值：

      <length>：
      用长度值来定义宽度。不允许负值

      说明：

      定义输出设备中的页面可见区域宽度。
      • 与盒模型width不同，媒体特性width的取值只能是<length>。
      • 本特性接受min和max前缀，因此可以派生出min-width和max-width两个媒体特性。

        简单列举几个应用示例：

        @media screen and (width){ … } @import url(example.css) screen and (width:800px); &lt;link media="screen and (min-width:400px) and (max-width:900px)" rel="stylesheet" href="example.css" /&gt; &lt;?xml-stylesheet media="not screen and (width:800px)" rel="stylesheet" href="example.css" ?&gt;
      height

      语法：

      height：<length>

      取值：

      <length>：
      用长度值来定义高度。不允许负值

      说明：

      定义输出设备中的页面可见区域高度。
      • 与盒模型height不同，媒体特性height的取值只能是<length>。
      • 本特性接受min和max前缀，因此可以派生出min-height和max-height两个媒体特性。

        简单列举几个应用示例：

        @media (min-height:400px){ … } @media screen and (height:600px){ … } @import url(example.css) screen and (height:800px);
      device-width

      语法：

      device-width：<length>

      取值：

      <length>：
      用长度值来定义宽度。不允许负值

      说明：

      定义输出设备的屏幕可见宽度。
      • 本特性接受min和max前缀，因此可以派生出 min-device-width 和 max-device-width 两个媒体特性。

        简单列举几个应用示例：

        @media screen and (device-width:1024px){ … } @import url(example.css) screen and (min-device-width:800px); &lt;link media="screen and (min-device-width:300px) and (max-device-width:900px)" rel="stylesheet" href="example.css" /&gt;
      device-height

      语法：

      device-height：<length>

      取值：

      <length>：
      用长度值来定义高度。不允许负值

      说明：

      定义输出设备的屏幕可见高度。
      • 本特性接受min和max前缀，因此可以派生出 min-device-height 和 max-device-height两个媒体特性。

        简单列举几个应用示例：

        @media screen and (device-height:800px){ … } @import url(example.css) screen and (min-device-height:800px); &lt;link media="screen and (min-device-height:300px) and (max-device-height:900px)" rel="stylesheet" href="example.css" /&gt;
      orientation

      语法：

      orientation：portrait | landscape

      接受min/max前缀：是

      取值：

      portrait：
      指定输出设备中的页面可见区域高度大于或等于宽度
      landscape：
      除portrait值情况外，都是landscape

      说明：

      定义输出设备中的页面可见区域高度是否大于或等于宽度。
      • 本特性不接受min和max前缀。

        简单列举几个应用示例：

        @media screen and (orientation:portrait){ … }
@import url(example.css) screen and (orientation:landscape);
      aspect-ratio

      语法：

      aspect-ratio：<ratio>

      取值：

      <ratio>：
      指定比率

      说明：

      定义输出设备中的页面可见区域宽度与高度的比率。
      • 本特性接受min和max前缀，因此可以派生出min-aspect-ratio 和 max-aspect-ratio 两个媒体特性。

        简单列举几个应用示例：

        @media screen and (aspect-ratio:1680/957){ … } @import url(example.css) screen and (max-aspect-ratio:20/11);
      device-aspect-ratio

      语法：

      device-aspect-ratio：<ratio>

      取值：

      <ratio>：
      指定比率

      说明：

      定义输出设备的屏幕可见宽度与高度的比率。
      • 如常讲的显示器屏幕比率：4/3, 16/9, 16/10
      • 本特性接受min和max前缀，因此可以派生出min-device-aspect-ratio 和 max-device-aspect-ratio两个媒体特性。

        简单列举几个应用示例：

        @media screen and (device-aspect-ratio:4/3){ … } @import url(example.css) screen and (min-device-aspect -ratio:4/3);
      color

      语法：

      color：<integer>

      取值：

      <integer>：
      用用整数值来定义彩色原件数。不允许负值

      说明：

      定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
      • 与色彩color不同，媒体特性color的取值只能是<integer>，用来表示色彩数。
      • 本特性接受min和max前缀，因此可以派生出min-color和max-color两个媒体特性。

        简单列举几个应用示例：

        @media screen and (color){ … } @import url(example.css) screen and (color:0); &lt;link media="screen and (min-color:1)" rel="stylesheet" href="example.css" /&gt;
      color-index

      语法：

      color-index：<integer>

      取值：

      <integer>：
      用用整数值来定义彩色查询表中的条目数。不允许负值

      说明：

      定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
      • 本特性接受min和max前缀，因此可以派生出min-color-index 和 max-color-index 两个媒体特性。

        简单列举几个应用示例：

        @media screen and (color-index){ … } @import url(example.css) screen and (min-color-index:1); &lt;link media="screen and (color-index:0)" rel="stylesheet" href="example.css" /&gt;
      monochrome

      语法：

      monochrome：<integer>

      接受min/max前缀：是

      取值：

      <integer>：
      用整数值来定义宽度。不允许负值

      说明：

      定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
      • 本特性接受min和max前缀，因此可以派生出min-monochrome 和 max-monochrome两个媒体特性。

        简单列举几个应用示例：

        @media screen and (monochrome){ … } @import url(example.css) screen and (monochrome:0); &lt;link media="screen and (min-monochrome:0) and (max-monochrome:10)" rel="stylesheet" href="example.css" /&gt; &lt;?xml-stylesheet media="not screen and (monochrome)" rel="stylesheet" href="example.css" ?&gt;
      resolution

      语法：

      resolution：<resolution>

      取值：

      <resolution>：
      用整数值来定义宽度。不允许负值

      说明：

      定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
      • 本特性接受min和max前缀，因此可以派生出min-resolution和max-resolution 两个媒体特性。

      • 简单列举几个应用示例：

        @media screen and (resolution){ … }
@import url(example.css) screen and (min-resolution:96dpi);
<link media="screen and (resolution:96dpi)" rel="stylesheet"
 href="example.css" />
      scan

      语法：

      scan：progressive | interlace

      取值：

      progressive：
      连续扫描
      interlace：
      交织扫描

      说明：

      定义电视类设备的扫描工序。
      • 本特性不接受min和max前缀。

      • 简单列举几个应用示例：

        @media tv and (scan:progressive){ … }
@import url(example.css) tv and (scan:interlace);
      grid

      语法：

      grid：<integer>

      取值：

      <integer>：
      用整数值来定义是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否

      说明：

      用来查询输出设备是否使用栅格或点阵。
      • 本特性不接受min和max前缀。

      • 简单列举几个应用示例：

        @media all and (grid){ … }
@import url(example.css) all and (grid:0);

      用户界面

      属性版本继承性描述
      appearanceCSS3无设置或检索外观按照本地默认样式
      text-overflowCSS3无当块容器overflow为非visible时，定义内联内容溢出其块容器是否截断或者添加(...)及自定义字符
      outlineCSS2无复合属性。设置或检索对象外的线条轮廓
      outline-widthCSS2无设置或检索对象外的线条轮廓的宽度
      outline-styleCSS2无设置或检索对象外的线条轮廓的样式
      outline-colorCSS2无设置或检索对象外的线条轮廓的颜色
      outline-offsetCSS3无设置或检索对象外的线条轮廓偏移位置的数值
      nav-indexCSS3无设置或检索对象的导航顺序。
      nav-upCSS3无设置或检索对象的导航方向。
      nav-rightCSS3无设置或检索对象的导航方向。
      nav-downCSS3无设置或检索对象的导航方向。
      nav-leftCSS3无设置或检索对象的导航方向。
      cursorCSS2有设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
      zoomCSS3有设置或检索对象的缩放比例。
      box-sizingCSS3无设置或检索对象的盒模型组成模式。
      resizeCSS3无设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小。
      ime-modeCSS3无设置或检索是否允许用户激活输入中文，韩文，日文等的输入法（IME）状态。
      user-selectCSS3无设置或检索是否允许用户选中文本。
      pointer-eventsCSS3有设置或检索在何时成为属性事件的target。


      table 1.1 heading
      属性描述
      appearance

      语法：

      appearance：none | button | button-bevel ...

      默认值：none

      适用于：所有元素

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      none：
      去除系统默认appearance的样式
      button：
      以按钮的风格渲染
      button-arrow-down：
      button-arrow-next：
      button-arrow-previous：
      button-arrow-up：
      button-bevel：
      button-focus：
      caps-lock-indicator：
      caret：
      checkbox：
      以复选框的风格渲染
      checkbox-container：
      checkbox-label：
      checkmenuitem：
      default-button：
      dualbutton：
      groupbox：
      listbox：
      以列表框的风格渲染
      listitem：
      以列表项的风格渲染
      media-fullscreen-button：
      media-mute-button：
      media-play-button：
      media-seek-back-button：
      media-seek-forward-button：
      media-slider：
      media-sliderthumb：
      menuarrow：
      menubar：
      menucheckbox：
      menuimage：
      menuitem：
      menuitemtext：
      menulist：
      menulist-button：
      menulist-text：
      menulist-textfield：
      menupopup：
      menuradio：
      menuseparator：
      meterbar：
      meterchunk：
      progressbar：
      以进度条的风格渲染
      progressbar-vertical：
      以垂直进度条的风格渲染
      progresschunk：
      以进度块的风格渲染
      progresschunk-vertical：
      以垂直进度块的风格渲染
      push-button：
      radio：
      以单选框的风格渲染
      radio-container：
      radio-label：
      radiomenuitem：
      resizer：
      resizerpanel：
      scale-horizontal：
      scalethumbend：
      scalethumb-horizontal：
      scalethumbstart：
      scalethumbtick：
      scalethumb-vertical：
      scale-vertical：
      scrollbarbutton-up：
      以滚动条按钮-上的风格渲染
      scrollbarbutton-right：
      以滚动条按钮-右的风格渲染
      scrollbarbutton-down：
      以滚动条按钮-下的风格渲染
      scrollbarbutton-left：
      以滚动条按钮-左的风格渲染
      scrollbargripper-horizontal：
      scrollbargripper-vertical：
      scrollbarthumb-horizontal：
      以水平滚动条滑块的风格渲染
      scrollbarthumb-vertical：
      以垂直滚动条滑块的风格渲染
      scrollbartrack-horizontal：
      以水平滚动条拖动区域的风格渲染
      scrollbartrack-vertical：
      以垂直滚动条拖动区域的风格渲染
      searchfield：
      以搜索框的风格渲染
      searchfield-cancel-button：
      以搜索框取消按钮的风格渲染
      searchfield-decoration：
      searchfield-results-button：
      searchfield-results-decoration：
      separator：
      sheet：
      slider-horizontal：
      sliderthumb-horizontal：
      sliderthumb-vertical：
      slider-vertical：
      spinner：
      spinner-downbutton：
      spinner-textfield：
      spinner-upbutton：
      splitter：
      square-button：
      statusbar：
      statusbarpanel：
      tab：
      以照选项卡标签的风格渲染
      tabpanel：
      以照选项卡区域的风格渲染
      tabpanels：
      tab-scroll-arrow-back：
      tab-scroll-arrow-forward：
      textarea：
      以多行文本框的风格渲染
      textfield：
      以单行行文本框的风格渲染
      textfield-multiline：
      toolbar：
      toolbarbutton：
      toolbarbutton-dropdown：
      toolbargripper：
      toolbox：
      tooltip：
      以气泡提示的风格渲染
      treeheader：
      treeheadercell：
      treeheadersortarrow：
      treeitem：
      treeline：
      treetwisty：
      treetwistyopen：
      treeview：

      说明：

      设置或检索外观按照本地默认样式
      • 如果你想去除元素本身的外观并进行自定义，可以设置为none
      • 对应的脚本特性为appearance。
      text-overflow

      语法：

      text-overflow：clip | ellipsis

      默认值：clip

      适用于：块级容器元素

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      clip：
      当内联内容溢出块容器时，将溢出部分裁切掉。
      ellipsis：
      当内联内容溢出块容器时，将溢出部分替换为（...）。

      说明：

      当块容器 <' overflow '> 为非visible时，定义内联内容溢出其块容器是否截断或者添加(...)及自定义字符
      • 要使得 <' text-overflow '> 属性生效，块容器必须显式定义 <' overflow '> 为非visible值，同时显式或者隐式的定义 <' width '> 为非auto值， <' white-space '> 为nowrap值。

        用代码来解释这段话：

        case 1：

        &lt;style&gt; .demo p{overflow:hidden;width:200px;white-space:nowrap;text-overflow:ellipsis;} &lt;/style&gt; &lt;div class="demo"&gt; &lt;p&gt;这是一句非常非常长的话，被用来做text-overflow属性测试。&lt;/p&gt; &lt;/div&gt;

        case 1，我们将text-overflow生效必备的3个属性： <' overflow '> , <' width '> 和 <' white-space '> 都直接定义在了内联内容的父级块容器上

        case 2：

        &lt;style&gt; .demo{width:200px;white-space:nowrap;} .demo p{overflow:hidden;text-overflow:ellipsis;} &lt;/style&gt; &lt;div class="demo"&gt; &lt;p&gt;这是一句非常非常长的话，被用来做text-overflow属性测试。&lt;/p&gt; &lt;/div&gt;

        case 2，我们将 <' width '> 和 <' white-space '> 定义在了更外层的块容器上，但case 1和case 2的效果是一样的。因为这2个属性可以被继承

      • 对应的脚本特性为textOverflow。
      outline

      语法：

      outline：<' outline-width '> || <' outline-style '> || <'outline-color '>

      默认值：看每个独立属性

      适用于：所有元素

      继承性：无

      动画性：看每个独立属性

      计算值：看每个独立属性

      相关属性: <' outline-offset '>

      取值：

      <' outline-width '>：
      指定轮廓边框的宽度。
      <' outline-style '>：
      指定轮廓边框的样式。
      <' outline-color '>：
      指定轮廓边框的颜色。

      说明：

      复合属性。设置或检索对象外的线条轮廓。outline画在 <' border'> 外面
      • outlines相关属性不占据布局空间，不会影响元素的尺寸；
      • outlines可能是非矩形；
      • 不允许类似 <' border '> 属性那样能将自身拆分为 <' border-top '> , <' border-right '> , <' border-bottom '> , <' border-left '>
      • 对应的脚本特性为outline。
      outline-width

      语法：

      outline-width：<length> | thin | medium | thick

      默认值：medium

      适用于：所有元素

      继承性：无

      动画性：当取值为<length>时

      计算值：绝对长度；如果 <' outline-style '> 的值为none时，则计算值为0

      取值：

      <length>：
      用长度值来定义轮廓的厚度。不允许负值
      medium：
      定义默认宽度的轮廓。
      thin：
      定义比默认宽度细的轮廓。
      thick：
      定义比默认宽度粗的轮廓。

      说明：

      设置或检索对象外的线条轮廓的宽度。参阅 <' outline '> 属性。
      outline-color

      语法：

      outline-color：<color> | invert

      默认值：invert

      适用于：所有元素

      继承性：无

      动画性：当取值为<color>时

      计算值：invert; 当指定为半透明时则对应一个rgba()计算值；如果非半透明值则对应一个rgb()计算值，transparent对应rgb(0,0,0,0)

      取值：

      <color>：
      指定颜色。
      invert：
      使用背景色的反色。该参数值目前仅在IE及Opera下有效

      说明：

      设置或检索对象外的线条轮廓的颜色。参阅 <' outline '> 属性。
      outline-style

      语法：

      outline-style：none | dotted | dashed | solid | double | groove | ridge | inset | outset

      默认值：none

      适用于：所有元素

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      none：
      无轮廓。与任何指定的 <' outline-width '> 值无关
      dotted：
      点状轮廓。
      dashed：
      虚线轮廓。
      solid：
      实线轮廓
      double：
      双线轮廓。两条单线与其间隔的和等于指定的 <' outline-width '> 值
      groove：
      3D凹槽轮廓。
      ridge：
      3D凸槽轮廓。
      inset：
      3D凹边轮廓。
      outset：
      3D凸边轮廓。

      说明：

      设置或检索对象外的线条轮廓的样式。参阅 <' outline '> 属性。
      outline-offset

      语法：

      outline-offset：<length>

      默认值：0

      适用于：所有元素

      继承性：无

      动画性：当取值为<length>时

      计算值：绝对长度

      取值：

      <length>：
      用长度值来定义轮廓偏移。允许负值。

      说明：

      设置或检索对象外的线条轮廓偏移容器的值。参阅 <' outline '> 属性。
      • outlines相关属性不占据布局空间，不会影响元素的尺寸；
      • outlines可能是非矩形；
      • outline-offset是以border边界作为参考点的，从0开始，正值从border边界往外延，负值从border边界往里缩。
      • 对应的脚本特性为outlineOffset。
      nav-index

      语法：

      nav-index：auto | <number>

      默认值：auto

      适用于：所有 enabled 的元素

      继承性：无

      动画性：否

      计算值：指定值

      相关属性: <' nav-up '> || <' nav-right '> || <' nav-down '> || <' nav-left '>

      取值：

      auto：
      元素的导航焦点顺序由客户端自动分配。
      <number>：
      用浮点数来定义元素的导航焦点顺序。若某元素的该值等于1则意味着该元素最先被导航。当若干个元素的nav-index值相同时，则按照文档的先后顺序进行导航。

      说明：

      设置或检索对象的导航顺序。
      • 该属性是HTML4/XHTML1中标签属性tabindex的替代品。
      • 只有支持nav-index属性的元素才能参与导航排序。
      • 被禁用的元素将不参与导航排序。
      • 该属性有被w3c标准移除的风险。
      • 对应的脚本特性为navIndex。
      nav-up

      语法：

      nav-up：auto | <id> [ current | root | <target-name> ]?

      默认值：auto

      适用于：所有 enabled 的元素

      继承性：无

      动画性：否

      计算值：指定值

      相关属性: <' nav-index '> || <' nav-right '> || <' nav-down '> || <' nav-left '>

      取值：

      auto：
      默认顺序。
      <id>：
      被导航元素的id。
      <target-name>：
      框架目标页面之间的元素焦点导航。

      说明：

      设置或检索对象的导航方向。
      • 只有支持nav-index属性的元素才能参与导航排序。
      • 被禁用的元素将不参与导航排序。
      • 该属性有被w3c标准移除的风险。
      • 对应的脚本特性为navUp。
      nav-right

      语法：

      nav-right：auto | <id> [ current | root | <target-name> ]?

      默认值：auto

      适用于：所有 enabled 的元素

      继承性：无

      动画性：否

      计算值：指定值

      相关属性: <' nav-index '> || <' nav-up '> || <' nav-down '> || <' nav-left '>

      取值：

      auto：
      默认顺序。
      <id>：
      被导航元素的id。
      <target-name>：
      框架目标页面之间的元素焦点导航。

      说明：

      设置或检索对象的导航方向。
      • 只有支持nav-index属性的元素才能参与导航排序。
      • 被禁用的元素将不参与导航排序。
      • 该属性有被w3c标准移除的风险。
      • 对应的脚本特性为navRight。
      nav-down

      语法：

      nav-down：auto | <id> [ current | root | <target-name> ]?

      默认值：auto

      适用于：所有 enabled 的元素

      继承性：无

      动画性：否

      计算值：指定值

      相关属性: <' nav-index '> || <' nav-up '> || <' nav-right '> || <' nav-left '>

      取值：

      auto：
      默认顺序。
      <id>：
      被导航元素的id。
      <target-name>：
      框架目标页面之间的元素焦点导航。

      说明：

      设置或检索对象的导航方向。
      • 只有支持nav-index属性的元素才能参与导航排序。
      • 被禁用的元素将不参与导航排序。
      • 该属性有被w3c标准移除的风险。
      • 对应的脚本特性为navDown。
      nav-left

      语法：

      nav-left：auto | <id> [ current | root | <target-name> ]?

      默认值：auto

      适用于：所有 enabled 的元素

      继承性：无

      动画性：否

      计算值：指定值

      相关属性: <' nav-index '> || <' nav-up '> || <' nav-right '> || <' nav-down '>

      取值：

      auto：
      默认顺序。
      <id>：
      被导航元素的id。
      <target-name>：
      框架目标页面之间的元素焦点导航。

      说明：

      设置或检索对象的导航方向。
      • 只有支持nav-index属性的元素才能参与导航排序。
      • 被禁用的元素将不参与导航排序。
      • 该属性有被w3c标准移除的风险。
      • 对应的脚本特性为navLeft。
      cursor

      语法：

      cursor：[<url> [<x> <y>]?,]*[ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing]

      默认值：auto

      适用于：所有元素

      继承性：有

      动画性：否

      计算值：指定值

      取值：

      <url>：
      使用绝对或者相对地址引入外部图像作为光标形状
      <url> <x> <y>：
      通过<x> <y>两个值指定具体需要显示的图像位置。类似 <' background-position '>
      auto：
      用户代理基于当前上下文决定光标形状
      default：
      相关平台的默认光标形状，通常为箭头。
      none：
      没有光标形状

      其他待完成...

      说明：

      设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
      • 使用自定义图像作为光标类型，IE, Opera只支持*.cur等特定的图片格式；Firefox, Chrome, Safari既支持特定图片类型也支持常见的*.png, *.gif, *.jpg等图片格式。
      • cursor的属性值可以是一个序列

        示例代码：

        :link,:visited{
    cursor:url(example.svg#linkcursor),
            url(hyper.cur),
            url(hyper.png) 2 3,
            pointer;
}

        本例用来给所有的超链接定义光标类型，客户端如果不支持SVG类型的光标，则使用下个"hyper.cur"；如果cur类型也不支持，则使用下个"hyper.png"；依次类推。

      • 对应的脚本特性为cursor。
      zoom

      语法：

      zoom：normal | <number> | <percentage>

      默认值：normal

      适用于：所有元素

      继承性：有

      动画性：是

      计算值：绝对长度

      取值：

      normal：
      使用对象的实际尺寸。
      <number>：
      用浮点数来定义缩放比例。不允许负值
      <percentage>：
      用百分比来定义缩放比例。不允许负值

      说明：

      设置或检索对象的缩放比例。
      • 对应的脚本特性为zoom。
      box-sizing

      语法：

      box-sizing：content-box | border-box

      默认值：content-box

      适用于：所有接受 <' width '> 和 <' height '> 的元素

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      content-box：
      padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )
      此属性表现为标准模式下的盒模型。
      border-box：
      padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
      此属性表现为怪异模式下的盒模型。

      说明：

      设置或检索对象的盒模型组成模式。

      • 标准盒模型代码与图示例:

        .test1{
    box-sizing:content-box;
    width:200px;
    padding:10px;
    border:15px solid #eee;
}

      • 怪异盒模型代码与图示例:

        .test1{
    box-sizing:border-box;
    width:200px;
    padding:10px;
    border:15px solid #eee;
}
      • 对应的脚本特性为boxSizing。
      resize

      语法：

      resize：none | both | horizontal | vertical

      默认值：none

      适用于：所有 <' overflow '> 设置为非visible的元素

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      none：
      不允许用户调整元素大小。
      both：
      用户可以调节元素的宽度和高度。
      horizontal：
      用户可以调节元素的宽度
      vertical：
      用户可以调节元素的高度。

      说明：

      设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小。
      • 如果希望此属性生效，需要设置对象的overflow属性，值可以是auto,hidden或scroll。
      • 对应的脚本特性为resize。
      ime-mode

      语法：

      ime-mode：auto | normal | active | inactive | disabled

      默认值：auto

      适用于：所有输入文本框

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      auto：
      不影响IME(input method editor)的状态。
      normal：
      正常的IME状态
      active：
      指定所有使用ime输入的字符。即激活本地语言输入法。用户仍可以撤销激活ime
      inactive：
      指定所有不使用ime输入的字符。即激活非本地语言。用户仍可以撤销激活ime
      disabled：
      完全禁用ime。对于有焦点的控件(如输入框)，用户不可以激活ime

      说明：

      设置或检索是否允许用户激活输入中文，韩文，日文等的输入法（IME）状态。
      • 该属性用于控制文本域输入法状态；
      • 该属性有被w3c标准移除的风险。
      • 对应的脚本特性为imeMode。
      user-select

      语法：

      user-select：none | text | all | element

      默认值：text

      适用于：除替换元素外的所有元素

      继承性：无

      动画性：否

      计算值：指定值

      取值：

      none：
      文本不能被选择
      text：
      可以选择文本
      all：
      当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
      element：
      可以选择文本，但选择范围受元素边界的约束

      说明：

      设置或检索是否允许用户选中文本。
      • IE6-9不支持该属性，但支持使用标签属性 onselectstart="return false;" 来达到 user-select:none 的效果；Safari和Chrome也支持该标签属性；
      • 直到Opera12.5仍然不支持该属性，但和IE6-9一样，也支持使用私有的标签属性 unselectable="on" 来达到 user-select:none 的效果；unselectable 的另一个值是 off；
      • 除Chrome和Safari外，在其它浏览器中，如果将文本设置为 -ms-user-select:none;，则用户将无法在该文本块中开始选择文本。不过，如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为 -ms-user-select:none; 的区域文本；
      • 对应的脚本特性为userSelect。
      pointer-events

      语法：

      pointer-events：auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all

      默认值：auto

      适用于：所有元素

      继承性：有

      动画性：否

      计算值：指定值

      取值：

      auto：
      与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同
      none：
      元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
      其他值只能应用在SVG上。

      说明：

      设置或检索在何时成为属性事件的target。
      • 使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（将会穿过父元素而指向位于其下面的元素）。
      • 对应的脚本特性为pointerEvents。


      附录

      颜色关键字(Color Keywords)

      16个基本颜色关键字 Basic color keywords

      ColorColor NameHEXRGB
       black#0000000,0,0
       silver#C0C0C0192,192,192
       gray#808080128,128,128
       white#FFFFFF255,255,255
       maroon#800000128,0,0
       red#FF0000255,0,0
       purple#800080128,0,128
       fuchsia#FF00FF255,0,255
       green#0080000,128,0
       lime#00FF000,255,0
       olive#808000128,128,0
       yellow#FFFF00255,255,0
       navy#0000800,0,128
       blue#0000FF0,0,255
       teal#0080800,128,128
       aqua#00FFFF0,255,255

      示例代码：

      body{color:black;background:white;}
h1{color:maroon;}
h2{color:olive;}

      28个系统颜色 CSS system colors

      ColorColor Name
       activeborder
       activecaption
       appworkspace
       background
       buttonface
       buttonhighlight
       buttonshadow
       buttontext
       captiontext
       graytext
       highlight
       highlighttext
       inactiveborder
       inactivecaption
       inactivecaptiontext
       infobackground
       infotext
       menu
       menutext
       scrollbar
       threeddarkshadow
       threedface
       threedhighlight
       threedlightshadow
       threedshadow
       window
       windowframe
       windowtext

      示例代码：

      body{color:windowtext;background:background;}
h1,h2{color:highlight;}

      CSS系统颜色在CSS3中已经不被建议使用了。尽可能的使用其它的方式来模拟系统色的色彩。

      拓展颜色关键字 Extended color keywords

      ColorColor NameHEXRGB
       aliceblue#f0f8ff240,248,255
       antiquewhite#faebd7250,235,215
       aqua#00ffff0,255,255
       aquamarine#7fffd4127,255,212
       azure#f0ffff240,255,255
       beige#f5f5dc245,245,220
       bisque#ffe4c4255,228,196
       black#0000000,0,0
       blanchedalmond#ffebcd255,235,205
       blue#0000ff0,0,255
       blueviolet#8a2be2138,43,226
       brown#a52a2a165,42,42
       burlywood#deb887222,184,135
       cadetblue#5f9ea095,158,160
       chartreuse#7fff00127,255,0
       chocolate#d2691e210,105,30
       coral#ff7f50255,127,80
       cornflowerblue#6495ed100,149,237
       cornsilk#fff8dc255,248,220
       crimson#dc143c220,20,60
       cyan#00ffff0,255,255
       darkblue#00008b0,0,139
       darkcyan#008b8b0,139,139
       darkgoldenrod#b8860b184,134,11
       darkgray#a9a9a9169,169,169
       darkgreen#0064000,100,0
       darkgrey#a9a9a9169,169,169
       darkkhaki#bdb76b189,183,107
       darkmagenta#8b008b139,0,139
       darkolivegreen#556b2f85,107,47
       darkorange#ff8c00255,140,0
       darkorchid#9932cc153,50,204
       darkred#8b0000139,0,0
       darksalmon#e9967a233,150,122
       darkseagreen#8fbc8f143,188,143
       darkslateblue#483d8b72,61,139
       darkslategray#2f4f4f47,79,79
       darkslategrey#2f4f4f47,79,79
       darkturquoise#00ced10,206,209
       darkviolet#9400d3148,0,211
       deeppink#ff1493255,20,147
       deepskyblue#00bfff0,191,255
       dimgray#696969105,105,105
       dimgrey#696969105,105,105
       dodgerblue#1e90ff30,144,255
       firebrick#b22222178,34,34
       floralwhite#fffaf0255,250,240
       forestgreen#228b2234,139,34
       fuchsia#ff00ff255,0,255
       gainsboro#dcdcdc220,220,220
       ghostwhite#f8f8ff248,248,255
       gold#ffd700255,215,0
       goldenrod#daa520218,165,32
       gray#808080128,128,128
       green#0080000,128,0
       greenyellow#adff2f173,255,47
       grey#808080128,128,128
       honeydew#f0fff0240,255,240
       hotpink#ff69b4255,105,180
       indianred#cd5c5c205,92,92
       indigo#4b008275,0,130
       ivory#fffff0255,255,240
       khaki#f0e68c240,230,140
       lavender#e6e6fa230,230,250
       lavenderblush#fff0f5255,240,245
       lawngreen#7cfc00124,252,0
       lemonchiffon#fffacd255,250,205
       lightblue#add8e6173,216,230
       lightcoral#f08080240,128,128
       lightcyan#e0ffff224,255,255
       lightgoldenrodyellow#fafad2250,250,210
       lightgray#d3d3d3211,211,211
       lightgreen#90ee90144,238,144
       lightgrey#d3d3d3211,211,211
       lightpink#ffb6c1255,182,193
       lightsalmon#ffa07a255,160,122
       lightseagreen#20b2aa32,178,170
       lightskyblue#87cefa135,206,250
       lightslategray#778899119,136,153
       lightslategrey#778899119,136,153
       lightsteelblue#b0c4de176,196,222
       lightyellow#ffffe0255,255,224
       lime#00ff000,255,0
       limegreen#32cd3250,205,50
       linen#faf0e6250,240,230
       magenta#ff00ff255,0,255
       maroon#800000128,0,0
       mediumaquamarine#66cdaa102,205,170
       mediumblue#0000cd0,0,205
       mediumorchid#ba55d3186,85,211
       mediumpurple#9370db147,112,219
       mediumseagreen#3cb37160,179,113
       mediumslateblue#7b68ee123,104,238
       mediumspringgreen#00fa9a0,250,154
       mediumturquoise#48d1cc72,209,204
       mediumvioletred#c71585199,21,133
       midnightblue#19197025,25,112
       mintcream#f5fffa245,255,250
       mistyrose#ffe4e1255,228,225
       moccasin#ffe4b5255,228,181
       navajowhite#ffdead255,222,173
       navy#0000800,0,128
       oldlace#fdf5e6253,245,230
       olive#808000128,128,0
       olivedrab#6b8e23107,142,35
       orange#ffa500255,165,0
       orangered#ff4500255,69,0
       orchid#da70d6218,112,214
       palegoldenrod#eee8aa238,232,170
       palegreen#98fb98152,251,152
       paleturquoise#afeeee175,238,238
       palevioletred#db7093219,112,147
       papayawhip#ffefd5255,239,213
       peachpuff#ffdab9255,218,185
       peru#cd853f205,133,63
       pink#ffc0cb255,192,203
       plum#dda0dd221,160,221
       powderblue#b0e0e6176,224,230
       purple#800080128,0,128
       red#ff0000255,0,0
       rosybrown#bc8f8f188,143,143
       royalblue#4169e165,105,225
       saddlebrown#8b4513139,69,19
       salmon#fa8072250,128,114
       sandybrown#f4a460244,164,96
       seagreen#2e8b5746,139,87
       seashell#fff5ee255,245,238
       sienna#a0522d160,82,45
       silver#c0c0c0192,192,192
       skyblue#87ceeb135,206,235
       slateblue#6a5acd106,90,205
       slategray#708090112,128,144
       slategrey#708090112,128,144
       snow#fffafa255,250,250
       springgreen#00ff7f0,255,127
       steelblue#4682b470,130,180
       tan#d2b48c210,180,140
       teal#0080800,128,128
       thistle#d8bfd8216,191,216
       tomato#ff6347255,99,71
       turquoise#40e0d064,224,208
       violet#ee82ee238,130,238
       wheat#f5deb3245,222,179
       white#ffffff255,255,255
       whitesmoke#f5f5f5245,245,245
       yellow#ffff00255,255,0
       yellowgreen#9acd32154,205,50

      示例代码：

      body{color:black;background:white;}
h1{color:violet;}
h2{color:yellowgreen;}

      媒体类型(Media Types)

      媒体类型版本兼容性描述
      auralCSS2不推荐使用Opera用于语音和音乐合成器
      brailleCSS2Opera用于触觉反馈设备
      handheldCSS2Chrome,Safari,Opera用于小型或手持设备
      printCSS2所有浏览器用于打印机
      projectionCSS2Opera用于投影图像，如幻灯片
      screenCSS2所有浏览器用于计算机显示器
      ttyCSS2Opera用于使用固定间距字符格的设备。如电传打字机和终端
      tvCSS2Opera用于电视类设备
      embossedCSS2Opera用于凸点字符（盲文）印刷设备
      speechCSS2Opera用于语音类型
      allCSS2所有浏览器用于所有媒体设备类型


      CSS Hack

      常用 CSS Hack

      * 这里只列举一些使用比率较高的常用 CSS Hack，且不考虑 IE6 以下的版本。

      * CSS Hack 一般都是利用各浏览器的支持 CSS 的能力和 BUG 来进行的。所以对浏览器的选择大致可以分为能力选择和怪癖选择(BUG)。能力通常是指浏览器对 CSS 特性的支持程度，而怪癖是指浏览器特有的一些 BUG。

      * 友情提示：尽量找到通用方法而减少对 CSS Hack 的使用，大规模使用 CSS Hack 会带来维护成本的提高以及浏览器版本变化而带来类似 Hack 失效等系列问题。

      条件Hack

      属性级Hack

      选择符级Hack

      table 1.1 heading
      hack描述
      条件Hack

      语法：

      &lt;!--[if &lt;keywords&gt;? IE &lt;version&gt;?]&gt; HTML代码块 &lt;![endif]--&gt;

      取值：

      <keywords>

      if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本

      是否：
      指定是否IE或IE某个版本。关键字：空
      大于：
      选择大于指定版本的IE版本。关键字：gt（greater than）
      大于或等于：
      选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）
      小于：
      选择小于指定版本的IE版本。关键字：lt（less than）
      小于或等于：
      选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）
      非指定版本：
      选择除指定版本外的所有IE版本。关键字：!
      <version>

      目前的常用IE版本为6.0及以上，推荐酌情忽略低版本，把精力花在为使用高级浏览器的用户提供更好的体验上

      IE10及以上版本已将条件注释特性移除，使用时需注意。

      说明：

      用于选择IE浏览器及IE的不同版本
      • if条件Hack是HTML级别的（包含但不仅是CSS的Hack，可以选择任何HTML代码块）

      • 如不想在非IE中看到某区域，可这样写：

        <!--[if IE]>
<p>你在非IE中将看不到我的身影</p>
<![endif]-->

        上述p代码块，将只在IE中可见。

      • if条件6种选择方式的使用示例（下述代码中被条件注释包含的HTML代码块也可以是link标记）：

      • 是否，示例代码：

        <!--[if IE]>
<style>
.test{color:red;}
</style>
<![endif]-->

        在上述代码中，只有IE浏览，才能看到应用了test类的元素是红色文本。

      • 大于，示例代码：

        <!--[if gt IE 6]>
<style>
.test{color:red;}
</style>
<![endif]-->

        在上述代码中，只有IE6以上，才能看到应用了test类的元素是红色文本。

      • 大于或等于，示例代码：

        <!--[if gte IE 6]>
<style>
.test{color:red;}
</style>
<![endif]-->

        在上述代码中，只有IE6以上（含IE6），才能看到应用了test类的元素是红色文本。

      • 小于，示例代码：

        <!--[if lt IE 7]>
<style>
.test{color:red;}
</style>
<![endif]-->

        在上述代码中，只有IE7以下，才能看到应用了test类的元素是红色文本。

      • 小于或等于，示例代码：

        <!--[if lte IE 7]>
<style>
.test{color:red;}
</style>
<![endif]-->

        在上述代码中，只有IE7以下（含IE7），才能看到应用了test类的元素是红色文本。

      • 非指定版本，示例代码：

        <!--[if ! IE 7]>
<style>
.test{color:red;}
</style>
<![endif]-->

        在上述代码中，除IE7以外的IE版本，都能看到应用了test类的元素是红色文本。

      属性级Hack

      语法：

      selector{<hack>?property:value<hack>?;}

      取值：

      _：
      选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（_）更为合适。
      *：
      选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（*）的认知度更高
      \9：
      选择IE6+
      \0：
      选择IE8+和Opera15以下的浏览器

      说明：

      选择不同的浏览器及版本
      • 尽可能减少对CSS Hack的使用。Hack有风险，使用需谨慎
      • 通常如未作特别说明，本文档所有的代码和示例的默认运行环境都为标准模式。

      • 一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。如下面这个例子：

        如想同一段文字在IE6,7,8显示为不同颜色，可这样写：

        .test {
    color: #090\9; /* For IE8+ */
    *color: #f00;  /* For IE7 and earlier */
    _color: #ff0;  /* For IE6 and earlier */
}

        * 上述Hack均需运行在标准模式下，若在怪异模式下运行，这些Hack将会被不同版本的IE相互识别，导致失效。

      选择符级Hack

      语法：

      <hack> selector{ sRules }

      说明：

      选择不同的浏览器及版本
      • 尽可能减少对CSS Hack的使用。Hack有风险，使用需谨慎
      • 通常如未作特别说明，本文档所有的代码和示例的默认运行环境都为标准模式。
      • 一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。

      • 简单列举几个：

        * html .test { color: #090; }       /* For IE6 and earlier */
* + html .test { color: #ff0; }     /* For IE7 */
.test:lang(zh-cmn-Hans) { color: #f00; }  /* For IE8+ and not IE */
.test:nth-child(1) { color: #0ff; } /* For IE9+ and not IE */

        * 上述代码中的3,4两行就是典型的利用能力来进行选择的CSS Hack。

      参考资源列表

      参考资源列表

      渐变色资源

      动画资源

      在线css3代码生成器

      Bugs和解决方案

      Bugs及解决方案列表（以下实例默认运行环境都为Standard mode）：

      1. 如何在IE6及更早浏览器中定义小高度的容器？

        方法：

        #test{overflow:hidden;height:1px;font-size:0;line-height:0;}

        IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高

      2. 如何解决IE6及更早浏览器浮动时产生双倍边距的BUG？

        方法：

        #test{display:inline;}

        当在IE6及更早浏览器中出现浮动后margin值解析为双倍的情况，设置该元素的display属性为inline即可。

      3. 如何在IE6及更早浏览器下模拟min-height效果？

        方法：

        #test{min-height:100px;_height:100px;}

        注意此时#test不能再设置overflow的值为hidden，否则模拟min-height效果将失效

      4. 如何解决按钮在IE7及更早浏览器下随着value增多两边留白也随着增加的问题？

        方法：

        input,button{overflow:visible;}

      5. 如何解决IE7及更早浏览器下当li中出现2个或以上的浮动时，li之间产生的空白间隙的BUG？

        方法：

        li{vertical-align:top;}

        除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值都可以

      6. 如何解决IE6及更早浏览器下的3像素BUG？

        方法：

        .a{color:#f00;}
.main{width:950px;background:#eee;}
.content{float:left;width:750px;height:100px;background:#ccc;_margin-right:-3px;}
.aside{height:100px;background:#aaa;}

<div class="main">
    <div class="content">content</div>
    <div class="aside">aside</div>
</div>

        在IE6及更早浏览器下为.content设置margin-right:-3px；也可以设置.aside为浮动

      7. 如何解决IE6下的文本溢出BUG（江湖匪号：“谍影重重”或“一只猪的故事”）？

        BUG重现：

        .test{zoom:1;overflow:hidden;width:500px;}
.box1{float:left;width:100px;}
.box2{float:right;width:400px;}

<div class="test">
    <div class="box1"></div>
    <!-- 注释 -->
    <div class="box2">↓这就是多出来的那只猪</div>
</div>

        运行如上代码，你会发现文字发生了溢出，在IE6下会多出一只“猪”。造成此BUG的原因可能是多重混合的，如浮动，注释，宽高定义等等。并且注释条数越多，溢出的文本也会随之增多。

        列举几个解决方法： 
        　删除box1和box2之间所有的注释； 
        　不设置浮动； 
        　调整box1或box2的宽度，比如将box的宽度调整为90px

      8. 如何解决IE6使用滤镜PNG图片透明后，容器内链接失效的问题？

        方法：

        div{width:300px;height:100px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='*.png');}
a{_position:relative;}

        解决方法是为容器内的链接定义相对定位属性position的值为relative

      9. 如何解决IE6无法识别伪对象:first-letter/:first-line的问题？

        方法1：

        p:first-letter {float:left;font-size:40px;font-weight:bold;}
p:first-line {color:#090;}

        增加空格：在伪对象选择符:first-letter/:first-line与包含规则的花括号"{"间增加空格。

        方法2：

        p:first-letter
{float:left;font-size:40px;font-weight:bold;}
p:first-line
{color:#090;}

        换行：将整个花括号"{"规则区域换行。细节参见E:first-letter和E:first-line选择符

      10. 如何解决IE8会忽略伪对象:first-letter/:first-line里的!important规则的问题？

        BUG重现：

        p:first-letter {float:left;font-size:40px;font-weight:bold;color:#f00!important;color:#090;}

        如上代码，在IE8下color定义都会失效，原因就是因为有color使用了!important规则。鉴于此，请尽量不要在:first-letter/:first-line里使用!important规则。

      11. 如何解决IE6会忽略同一条样式体内的!important规则的问题？

        BUG重现：

        div{color:#f00!important;color:#000;}

        如上代码，IE6及以下浏览器div的文本颜色为#000，!important并没有覆盖后面的规则，也就是说!important被忽略了。解决方案是将该样式拆分为2条，细节参见!important规则

      12. 如何解决IE6及更早浏览器下当li内部元素是定义了display:block的内联元素时底部产生空白的问题？

        BUG重现：

        a,span{display:block;background:#ddd;}

<ul>
    <li><a href="http://css.doyoe.com/">CSS参考手册</a></li>
    <li><a href="http://blog.doyoe.com/">CSS探索之旅</a></li>
    <li><a href="http://demo.doyoe.com/">web前端实验室</a></li>
    <li><span>测试li内部元素为设置了display:block的内联元素时底部产生空白</span></li>
</ul>

        如上代码，IE6及更早浏览器每个li内部的内联元素底部都会产生空白。解决方案是给li内部的内联元素再加上zoom:1

      13. 如何解决IE6及更早浏览器下未定义宽度的浮动或绝对定位元素会被内部设置了zoom:1的块元素撑开的问题？

        BUG重现：

        #test{zoom:1;overflow:hidden;border:1px solid #ddd;background:#eee;}
#test h1{float:left;}
#test .nav{float:right;background:#aaa;}
#test .nav ul{zoom:1;overflow:hidden;margin:0;padding:0;list-style:none;}
#test .nav li{float:left;margin:0 5px;}

<div id="test">
    <h1>Doyoe</h1>
    <div class="nav">
        <ul>
            <li><a href="http://css.doyoe.com/">CSS参考手册</a></li>
            <li><a href="http://blog.doyoe.com/">CSS探索之旅</a></li>
            <li><a href="http://demo.doyoe.com/">web前端实验室</a></li>
        </ul>
    </div>
</div>

        如上代码，IE6及更早浏览器div.nav会被设置了zoom:1的ul给撑开。

        列举几个解决方法： 
        　设置ul为浮动元素； 
        　设置ul为inline元素； 
        　设置ul的width

      14. 如何解决IE7及更早浏览器下子元素相对定位时父元素overflow属性的auto|hidden失效的问题？

        BUG重现：

        div{overflow:auto;width:260px;height:80px;border:1px solid #ddd;}
p{position:relative;margin:0;}

<div>
    <p>如果我是相对定位，我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器，你将可以看到这个BUG</p>
    <p>如果我是相对定位，我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器，你将可以看到这个BUG</p>
</div>

        如上代码，在IE7及更早浏览器下你会看到div的滚动条将无法工作。解决方案是给div也设置相对定位position:relative

      15. 如何解决Chrome在应用transition时页面闪动的问题？

        方法：

        -webkit-transform-style:preserve-3d;或-webkit-backface-visibility:hidden;

        在Chrome下，使用过渡效果transition时有时会出现页面闪动

      技巧和经验

      CSS技巧和经验列表（以下实例默认运行环境都为Standard mode）：

      1. 如何清除图片下方出现几像素的空白间隙？

        方法1：

        img{display:block;}

        方法2：

        img{vertical-align:top;}

        除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值都可以

        方法3：

        #test{font-size:0;line-height:0;}

        #test为img的父元素

      2. 如何让文本垂直对齐文本输入框？

        方法：

        input{vertical-align:middle;}

      3. 如何让单行文本在容器内垂直居中？

        方法：

        #test{height:25px;line-height:25px;}

        只需设置文本的行高等于容器的高度即可

      4. 如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果？

        方法：

        a:link{color:#03c;}
a:visited{color:#666;}
a:hover{color:#f30;}
a:active{color:#c30;}

        按L-V-H-A的顺序设置超链接样式即可，可速记为LoVe（喜欢）HAte（讨厌）

      5. 为什么Standard mode下IE无法设置滚动条的颜色？

        方法：

        html{
    scrollbar-3dlight-color:#999;
    scrollbar-darkshadow-color:#999;
    scrollbar-highlight-color:#fff;
    scrollbar-shadow-color:#eee;
    scrollbar-arrow-color:#000;
    scrollbar-face-color:#ddd;
    scrollbar-track-color:#eee;
    scrollbar-base-color:#ddd;
}

        将原来设置在body上的滚动条颜色样式定义到html标签选择符上即可

      6. 如何使文本溢出边界不换行强制在一行内显示？

        方法：

        #test{width:150px;white-space:nowrap;}

        设置容器的宽度和white-space为nowrap即可，其效果类似<nobr>标签

      7. 如何使文本溢出边界显示为省略号？

        方法（此方法Firefox5.0尚不支持）：

        #test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

        首先需设置将文本强制在一行内显示，然后将溢出的文本通过overflow:hidden截断，并以text-overflow:ellipsis方式将截断的文本显示为省略号。

      8. 如何使连续的长字符串自动换行？

        方法：

        #test{width:150px;word-wrap:break-word;}

        word-wrap的break-word值允许单词内换行

      9. 如何清除浮动？

        方法1：

        #test{clear:both;}

        #test为浮动元素的下一个兄弟元素

        方法2：

        #test{display:block;zoom:1;overflow:hidden;}

        #test为浮动元素的父元素。zoom:1也可以替换为固定的width或height

        方法3：

        #test{zoom:1;}
#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}

        #test为浮动元素的父元素

      10. 如何定义鼠标指针的光标形状为手型并兼容所有浏览器？

        方法：

        #test{cursor:pointer;}

        若将cursor设置为hand，将只有IE和Opera支持，且hand为非标准属性值

      11. 如何让已知高度的容器在页面中水平垂直居中？

        方法：

        #test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}

        Know More：已知高度的容器如何在页面中水平垂直居中

      12. 如何让未知尺寸的图片在已知宽高的容器内水平垂直居中？

        方法：

        #test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}
#test p{*position:absolute;*top:50%;*left:50%;margin:0;}
#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}

        #test是img的祖父节点，p是img的父节点。Know More：未知尺寸的图片如何水平垂直居中

      13. 如何设置span的宽度和高度（即如何设置内联元素的宽高）？

        方法：

        span{display:block;width:200px;height:100px;}

        要使内联元素可以设置宽高，只需将其定义为块级或者内联块级元素即可。所以方法非常多样，既可以设置display属性，也可以设置float属性，或者position属性等等。

      14. 如何给一个元素定义多个不同的css规则？

        方法：

        .a{color:#f00;}
.b{background:#eee;}
.c{background:#ccc;}

<div class="a b">测试1</div>
<div class="a c">测试2</div>

        多个规则之间使用空格分开，并且只有class能同时使用多个规则，id不可以

      15. 如何让某个元素充满整个页面？

        方法：

        html,body{height:100%;margin:0;}
#test{height:100%;}

      16. 如何让某个元素距离窗口上右下左4边各10像素？

        方法：

        html,body{height:100%;margin:0;}
html{_padding:10px;}
#test{position:absolute;top:10px;right:10px;bottom:10px;left:10px;_position:static;_height:100%;}

      17. 如何去掉超链接的虚线框？

        方法：

        a{outline:none;}

        IE7及更早浏览器由于不支持outline属性，需要通过js的blur()方法来实现，如<a onfocus="this.blur();"...

      18. 如何容器透明，内容不透明？

        方法1：

        .outer{width:200px;height:200px;background:#000;filter:alpha(opacity=20);opacity:.2;}
.inner{width:200px;height:200px;margin-top:-200px;}

<div class="outer"><!--我是透明的容器--></div>
<div class="inner">我是不透明的内容</div>

        原理是容器层与内容层并级，容器层设置透明度，内容层通过负margin或者position绝对定位等方式覆盖到容器层上

        方法2：

        .outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity=20)\9;}
.outer .inner{position:relative\9;}

<div class="outer">
    <div class="inner">我是不透明的内容</div>
</div>

        高级浏览器直接使用rgba颜色值实现；IE浏览器在定义容器透明的同时，让子节点相对定位，也可达到效果

      19. 如何让整个页面水平居中？

        方法：

        body{text-align:center;}
#test2{width:960px;margin:0 auto;text-align:left;}

        定义body的text-align值为center将使得IE5.5也能实现居中

      20. 为什么容器的背景色没显示出来？为什么容器无法自适应内容高度？

        方法：

        清除浮动，方法请参考本页第9条

        通常出现这样的情况都是由于没有清除浮动而引起的，所以Debug时应第一时间想到是否有未清除浮动的地方

      21. 如何做1像素细边框的table？

        方法1：

        #test{border-collapse:collapse;border:1px solid #ddd;}
#test th,#test td{border:1px solid #ddd;}

<table id="test">
    <tr><th>姓名</th><td>Joy Du</td></tr>
    <tr><th>年龄</th><td>26</td></tr>
</table>

        方法2：

        #test{border-spacing:1px;background:#ddd;}
#test tr{background:#fff;}

<table id="test" cellspacing="1">
    <tr><th>姓名</th><td>Joy Du</td></tr>
    <tr><th>年龄</th><td>26</td></tr>
</table>

        IE7及更早浏览器不支持border-spacing属性，但是可以通过table的标签属性cellspacing来替代。

      22. 如何使页面文本行距始终保持为n倍字体大小的基调？

        方法：

        body{line-height:n;}

        注意，不要给n加单位。Know More：如何使页面文本行距始终保持为n倍字体大小的基调

      23. 标准模式Standard mode和怪异模式Quirks mode下的盒模型区别？

        方法：

        标准模式下：Element width = width + padding + border
怪异模式下：Element width = width

        相关资料请参阅CSS3属性box-sizing

      24. 以图换字的几种方法及优劣分析

        思路1：使用text-indent的负值，将内容移出容器

        .test1{width:200px;height:50px;text-indent:-9999px;background:#eee url(*.png) no-repeat;}

<div class="test">以图换字之内容负缩进法</div>

        该方法优点在于结构简洁，不理想的地方：1.由于使用场景不同，负缩进的值可能会不一样，不易抽象成公用样式；2.当该元素为链接时，在非IE下虚线框将变得不完整；3.如果该元素被定义为内联级或者内联块级，不同浏览器下会有较多的差异

        思路2：使用display:none或visibility:hidden将内容隐藏；

        .test{width:200px;height:50px;background:#eee url(*.png) no-repeat;}
.test span{visibility:hidden;/* 或者display:none */}

<div class="test"><span>以图换字之内容隐藏法</span></div>

        该方法优点在于兼容性强并且容易抽象成公用样式，缺点在于结构较复杂

        思路3：使用padding或者line-height将内容挤出容器之外；

        .test{overflow:hidden;width:200px;height:0;padding-top:50px;background:#eee url(*.png) no-repeat;}
.test{overflow:hidden;width:200px;height:50px;line-height:50;background:#eee url(*.jpg) no-repeat;}

<div class="test">以图换字之内容排挤法</div>

        该方法优点在于结构简洁，缺点在于：1.由于使用场景不同，padding或line-height的值可能会不一样，不易抽象成公用样式；2.要兼容IE5.5及更早浏览器还得hack

        思路4：使用超小字体和文本全透明法；

        .test{overflow:hidden;width:200px;height:50px;font-size:0;line-height:0;color:rgba(0,0,0,0);background:#eee url(*.png) no-repeat;}

<div class="test">以图换字之超小字体+文本全透明法</div>

        该方法结构简单易用，推荐使用

      25. 为什么2个相邻div的margin只有1个生效？

        方法：

        .box1{margin:10px 0;}
.box2{margin:20px 0;}

<div class="box1">box1</div>
<div class="box2">box2</div>

        本例中box1的底部margin为10px，box2的顶部margin为20px，但表现在页面上2者之间的间隔为20px，而不是预想中的10+20px=30px，结果是选择2者之间最大的那个margin，我们把这种机制称之为“外边距合并”；外边距合并不仅仅出现在相邻的元素间，父子间同样会出现。

        简单列举几点注意事项: 
        　外边距合并只出现在块级元素上； 
        　浮动元素不会和相邻的元素产生外边距合并； 
        　绝对定位元素不会和相邻的元素产生外边距合并； 
        　内联块级元素间不会产生外边距合并； 
        　根元素间不会不会产生外边距合并（如html与body间）； 
        　设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并；

      26. 如何在文本框中禁用中文输入法？

        方法：

        input,textarea{ime-mode:disabled;}

        ime-mode为非标准属性，写该文档时只有IE和Firefox支持

      27. 如何解决列表中list-style-image不能精准定位的问题？

        方法：

        不使用list-style-image来定义列表项目标记符号，而用background-image来代替，并通过background-position来进行定位

      28. 如何解决伪对象:before和:after在input标签上的怪异表现的问题？

        现象：

        在编写本条目时，除了Opera，在所有浏览器下input标签使用伪对象:before和:after都没有效果，即使Opera的表现也同样令人诧异。大家可以试玩一下。浏览器版本：IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51

      29. 如何解决伪对象:before和:after无法在Chrome,Safari,Opera上定义过渡和动画的问题？

        现象：

        在编写本条目时，除了Firefox，在所有浏览器下伪对象:before和:after无法定义过渡和动画效果。浏览器版本：IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51。如果这个过渡或动画效果是必须，可以考虑使用真实对象。

      其它经验

      其它技巧和经验列表（以下实例默认运行环境都为Standard mode）：

      1. 如何让层在flash上显示？

        方法：

        <param name="wmode" value="transparent" />

        设置flash的wmode值为transparent或opaque

      2. 如何使用标准的方法在页面上插入flash？

        方法：

        <object id="flash-show" type="application/x-shockwave-flash" data="*.swf">
    <param name="movie" value="*.swf" />
    <param name="wmode" value="transparent" />
    <img src="*.jpg" alt="用于不支持flash或屏蔽flash时显示" />
</object>

        至于flash的宽高可以在css里设置

      3. 如何在点文字时也选中复选框或单选框？

        方法1：

        <input type="checkbox" id="chk1" name="chk" /><label for="chk1">选项一</label>
<input type="checkbox" id="chk2" name="chk" /><label for="chk2">选项二</label>

<input type="radio" id="rad1" name="rad" /><label for="rad1">选项一</label>
<input type="radio" id="rad2" name="rad" /><label for="rad2">选项二</label>

        该方式所有主流浏览器都支持

        方法2：

        <label><input type="checkbox" name="chk" />选项一</label>
<label><input type="checkbox" name="chk" />选项二</label>

<label><input type="radio" name="rad" />选项一</label>
<label><input type="radio" name="rad" />选项二</label>

        该方式相比方法1更简洁，但IE6及更早浏览器不支持

      4. IE下如何对Standard Mode与Quirks Mode进行切换？

        IE6的触发（在DTD申明前加上XML申明）：

        <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

        IE5.5及更早浏览器版本直接以Quirks Mode解析。

        所有IE版本的触发（在DTD申明前加上HTML注释）：

        <!-- Let IE into quirks mode -->
<!DOCTYPE html>

        当没有DTD声明时，所有IE版本也会进入Quirks Mode。

      5. 如何区别display:none与visibility:hidden？

        方法：

        相同的是display:none与visibility:hidden都可以用来隐藏某个元素； 不同的是display:none在隐藏元素的时候，将其占位空间也去掉；而visibility:hidden只是隐藏了内容而已，其占位空间仍然保留。

      6. 如何设置IE下的iframe背景透明？

        方法：

        设置iframe元素的标签属性allowtransparency="allowtransparency"然后设置iframe内部页面的body背景色为transparent。 不过由此会引发IE下一些其它问题，如：设置透明后的iframe将不能遮住select







      {% endblock point1 %}